Cuál es la diferencia entre los dos:

<form #form="ngForm">

Y

<form [ngFormModel]="form">

¿Cuándo usas uno sobre el otro?

26
Sam 29 ene. 2016 a las 22:44

2 respuestas

La mejor respuesta

La primera estrategia es un formulario 'basado en plantillas': Angular agregará una directiva implícita al formulario y usted agregará validadores principalmente de forma declarativa en la plantilla, por lo que el nombre 'impulsado por plantillas'. Por ejemplo, así es como agregar un validador que diga 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 formulario es muy adecuado para usarse con ng-model e ideal para migrar formularios de Angular 1 a Angular 2.

La segunda estrategia es una forma "impulsada por modelos". 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 funcionales de programación reactiva. 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 del formulario.

Entonces, elegir entre ambos depende mucho del caso de uso:

  • si migra un formulario existente, considere la opción 1 de NgModel +
  • si está construyendo un formulario nuevo 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 mediante código y obtener los valores del formulario a través de NgModel. No estás obligado a utilizar técnicas de programación reactiva funcional con formGroup, aunque definitivamente pruébalo, es muy poderoso

PD Vea más sobre los nuevos formularios en Angular2 aquí

29
tom 22 sep. 2017 a las 04:23

Con la primera estrategia, 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 utilizar variables locales para hacer referencia al elemento HTML o aplicar una directiva específica en él. En su caso, es una directiva. Esto le permite usar la variable local en expresión:

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

Con el otro se refiere 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 asincrónicos y componerlos (ver Validators.compose) para elementos de formulario.

Espero que te ayude, Thierry

5
Thierry Templier 29 ene. 2016 a las 19:56