Live Example

Guía angular.io

Se describen brevemente los template-driven forms ya que vamos a utilizar reactive-forms.

ng new angular-forms

ng generate class Hero

ng generate component HeroForm

Consideraciones

* Se define un atributo opcional en Hero

* Incluir FormsModule en app.module.ts

* Visualizar poderes mediante ngFor

* Enlazar campos utilizando [(ngModel)]

* Declarar una variable de template para el formulario: < form #heroForm=”ngForm”>

* Template reference variable #name=”ngModel” para visualizar o esconder mensajes de error < div [hidden]=”name.valid || name.pristine” class=”alert alert-danger” >

* “pristine” means the user hasn’t changed the value since it was displayed in this form.

* newHero button and reset: < button type=”button” class=”btn btn-default” (click)=”newHero(); heroForm.reset()”>New Hero< /button>

* onSubmit method: < form (ngSubmit)=”onSubmit()” #heroForm=”ngForm”>

* disabled form: < button type=”submit” class=”btn btn-success”[disabled]=”!heroForm.form.valid”>Submit< /button>

Template reference variable para propósitos de debug

Para propósitos de debug:

< input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #spy>
< br>TODO: remove this: {{spy.className}}