angularjs - simple - ¿Diferencia entre#form=“ngForm” y[ngFormModel]=“form”?

onchange angular 6

Question

Cuál es la diferencia entre los dos:

<form #form="ngForm">

Y

<form [ngFormModel]="form">

¿Cuándo usas uno sobre el otro?

Answer 1

Con la primera estrategia usted define un control para su formulario en línea. Para una validación simple, este enfoque es suficiente. Implícitamente, la directiva NgForm se aplica al elemento <form> . Puede usar variables locales para hacer referencia al elemento HTML o aplicar una directiva específica. En tu caso, es una directiva. Esto le permite usar la variable local en la expresión:

<form #form="ngForm">
  <button type="submit" [disabled]="!ngForm.valid">Submit</button>
</form>

Con el otro, usted hace referencia a un control que se define usando la clase FormBuilder en la clase de componente, como se describe a continuación:

export class DetailsComponent {
  constructor(builder:FormBuilder) {
    this.companyForm = builder.group({
      name: ['''', Validators.required,  
         createUniqueNameValidator(service,this)],
      tags: ['''', notEmptyValidator],
      addressStreet: ['''', Validators.required],
      addressZipCode: ['''', Validators.compose([ Validators.required, 
               zipCodeValidator ])],
      addressCity: ['''', Validators.required]
    });
  }
}

El segundo enfoque es más avanzado y permite registrar validadores personalizados, validadores asíncronos y componerlos (ver Validators.compose ) para elementos de formulario.

Espero te ayude, Thierry

Answer 2

La primera estrategia es un formulario ''basado en plantillas'': Angular agregará una directiva implícita al formulario y usted agregará validadores en su mayoría de forma declarativa en la plantilla y, por lo tanto, el nombre ''dirigido por plantillas''. Por ejemplo, esto es cómo agregar un validador que dice que el campo es obligatorio:

<form #form="ngForm">
    <input name="firstName" required [(ngModel)]="formModel">
</form>

Aquí hemos utilizado el atributo requerido, y Angular a través de una directiva implícita ha configurado el validador requerido. Este tipo de forma es muy adecuado para ser utilizado con el modelo ng, y es ideal para migrar formas Angular 1 a Angular 2.

La segunda estrategia es una forma ''basada en el modelo''. Aquí no declaramos validadores en la plantilla, sino que declaramos nombres de control:

<form [formGroup]="form">
    <input name="firstName" formControlName="firstName">
</form>

Luego, toda la lógica de validación se declara mediante código y no en la plantilla. También podemos suscribirnos al formulario como Observable y utilizar técnicas de programación reactiva funcional. Por ejemplo:

@Component({
    selector: "some-component",
    templateUrl: ''model-driven-form.html''
})
export class ModelDrivenForm {
    form: FormGroup;
    firstName = new FormControl ("", Validators.required);
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            "firstName":["", Validators.required]
        });
        this.form.valueChanges
        .subscribe((formValue) => {
            console.log(formValue);
        });
    }
}

Esto también funciona con NgModel pero como vemos, no sería necesario, porque ya podemos obtener el valor del formulario a través del control de formulario.

Así que elegir entre ambos depende mucho del caso de uso:

• Si está migrando un formulario existente, considere la opción de NgModel + 1
• Si está creando un nuevo formulario y quiere probar técnicas de programación reactiva funcional, considere la opción 2 de formGroup
• Como se mencionó anteriormente, NgModel también funciona con la opción 2. Por lo tanto, puede combinar la definición de los validadores a través del código y obtener los valores del formulario a través de NgModel. No estás obligado a usar técnicas de programación reactiva funcional con formGroup , aunque definitivamente lo pruebes, es muy poderoso.

PS Ver más sobre nuevas formas en Angular2 here