Forms

Forms are the main building blocks in every web application. Angular offers two approaches to build forms: template-driven forms and reactive forms. This section gives you a short overview of template-driven forms.

Reactive forms are suitable when you need to create dynamic forms programmatically in the component's class. Refer to the official Angular documentation to learn reactive forms (https://angular.io/docs/ts/latest/guide/reactive-forms.html).

We already mentioned two directives: NgForm and NgModel. The first directive creates a FormGroup instance and binds it to a form in order to track aggregate form value and validation status. The second one creates a FormControl instance and binds it to the corresponding form element. The FormControl instance tracks the value and the status of the form element. Each input element should have a name property that is required to register the FormControl by the FormGroup under the name you assigned to the name attribute. How to deal with this tracked data? You can export the NgForm and NgModel directives into local template variables such as #f="ngForm" and #i="ngModel", respectively. Here, f and i are local template variables that give you access to the value and status of FormGroup and FormControl, respectively. This is possible because the properties from FormGroup and FormControl are duplicated on the directives themselves. With this knowledge in hand, you can now check if the whole form or a particular form element:

• Is valid (valid and invalid properties)
• Has been visited (touched and untouched properties)
• Has some changed value (dirty and pristine properties)

The next example illustrates the basic concept:

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
  <label for="name">Name</label>
  <input type="text" id=name" name="name" required
         [(ngModel)]="name" #i="ngModel"> 
  <div [hidden]="i.valid || i.pristine">
    Name is required
  </div>
  <button>Submit</button>
</form>

// Output values and states
Input value: {{i.value}}
Is input valid? {{i.valid}}
Input visited? {{i.touched}}
Input value changed? {{i.dirty}}
Form input values: {{f.value | json}}
Is form valid? {{f.valid}}
Form visited? {{f.touched}}
Form input values changed? {{f.dirty}}

The NgModel directive also updates the corresponding form element with specific CSS classes that reflect the element's state. The following classes are added/removed dependent on the current state:

State	Class if true	Class if false
Element has been visited	ng-touched	ng-untouched
Element's value has changed	ng-dirty	ng-pristine
Element's value is valid	ng-valid	ng-invalid

 

This is handy for styling. For example, in case of validation errors, you can set red borders around input elements:

input.ng-dirty.ng-invalid {
  border: solid 1px red;
}