La primera estrategia es un formulario 'controlado por plantilla': Angular agregará una directiva implícita al formulario y usted agrega validadores en su mayoría de forma declarativa en la plantilla, por lo que el nombre 'controlado por plantilla'. 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 usado 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, y es ideal para migrar formularios Angular 1 a Angular 2.

La segunda estrategia es una forma 'basada en 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 a través del código y no en la plantilla. También podemos suscribirnos al formulario como Observable y usar técnicas de programación funcional 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 de formulario.

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

• si migra un formulario existente, considere NgModel + opción 1
• si crea un nuevo formulario y desea 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 funcional reactiva con formGroup , aunque definitivamente pruébalo, es muy poderoso

PD Ver más sobre nuevos formularios en Angular2 aquí

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 usar variables locales para hacer referencia al elemento HTML o aplicarle una directiva específica. En su 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, hace referencia a un control que se define utilizando 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 que te ayude Thierry