कोणीय सबमिट और ngSubmit घटनाओं के बीच अंतर?

Question

मैं एक कोणीय 2 अनुप्रयोग में एक फॉर्म बना रहा हूँ।

एचटीएमएल मुझे सबमिट घटना देता है। कोणीय में मैं एक घटना (सबमिट) घटना बाध्यकारी का उपयोग कर इस घटना को सुन सकता था। उस पर, कोणीय ngSubmit घटना जोड़ता है, जिसे मैं सुन सकता हूं, (ngSubmit) का उपयोग कर।

मैं समझता हूं कि सबमिट एचटीएमएल से आता है, और एनगुलर से एनजी सबमिट करें। जो मुझे समझ में नहीं आता है, मुझे सामान्य सबमिट ईवेंट की बजाय एक विशेष ngSubmit ईवेंट सुनने की आवश्यकता क्यों होगी।

मैंने plunker बनाया जो दोनों घटनाओं को सुनता है और दोनों एक ही काम करते हैं।

सुनने (सबमिट) और (ngSubmit) सुनने के बीच क्या अंतर है?

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form (submit)='onSubmit(form)' (ngSubmit)='onNgSubmit(form)' novalidate #form='ngForm'> 
     <input type='text' name='input' [(ngModel)]='input' required> 
     <input type='submit' value='Submit' required> 
    </form> 
    `, 
}) 
export class App { 

    input : string; 

    onSubmit(form): void { 
    console.log(`submit: ${this.input}, valid: ${form.valid}`); 
    } 

    onNgSubmit(form): void { 
    console.log(`ng-submit: ${this.input}, valid: ${form.valid}`); 
    } 
} 

Answer 1

ngSubmit सुनिश्चित करता है कि प्रपत्र जब हैंडलर कोड फेंकता है और एक वास्तविक http पोस्ट अनुरोध का कारण बनता है प्रस्तुत नहीं करता है।

https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html से

Answer 2

submit: यह एचटीएमएल डिफ़ॉल्ट रूप घटना सबमिट करते हैं, यह अंतर्निहित विधि कॉल होगा जब प्रपत्र सबमिट किया जाता है।

ngSubmit:host bindingform तत्व पर स्थित है। मूल रूप से यह झूठी लौटकर ब्राउज़र के prevent default submit event (जो post हो सकता है)। आखिरकार आप फॉर्म लोड के कारण परंपरागत PostBack कॉल या पेज रीलोड को रोक सकते हैं। इस तरह आप अपने प्रपत्र & मान्य कर सकते हैं Component कोड