formulario - ngform angular5

¿Diferencia entre eventos angulares y ngSubmit?

Question

Estoy construyendo un formulario en una aplicación Angular 2.

Html me da el evento de envío. En Angular podría escuchar este evento utilizando un enlace de evento (enviar). Además de eso, Angular agrega el evento ngSubmit, que podía escuchar usando (ngSubmit).

Entiendo que el envío proviene de html y ngSubmit de Angular. Lo que no entiendo es por qué necesitaría escuchar un evento ngSubmit especial, en lugar del evento de envío normal.

plunker un plunker que escucha ambos eventos y ambos parecen hacer lo mismo.

¿Cuál es la diferencia entre escuchar (enviar) y (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 garantiza que el formulario no se envíe cuando el código del manejador se lance y provoca una solicitud de publicación de http real.

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

Answer 2

enviar: Si la función no se define en su evento de clic, nunca se publicarán los datos.

(ngsubmit) = "saveEmployee (ngForm)": publica el valor ngform para la consola en angular

Answer 3

submit : es un evento de envío de formulario predeterminado en html, llamará al método subyacente cuando se envíe el formulario.

ngSubmit : es el enlace del host situado en el elemento de form . Básicamente, evita el submit predeterminado del evento del navegador (que puede ser una forma de post ) al devolver falso. Eventualmente, puede evitar las llamadas tradicionales de PostBack o la recarga de la página debido a la carga de formularios. De esta manera, puede validar su formulario y enviarlo al servidor ajax manual desde el Código del Component