FormControl with Angular

60-form-control-angular.md

1. Init

ng new angular-forms

2. Create component

ng g c components/product-form

3. Include reactive forms

import { ReactiveFormsModule } from '@angular/forms';

ng g c components/product-form

4. FormControl

emailCtrl = new FormControl('', []);

<p>
  Email: <br/>
  <input type="email" [formControl]="emailCtrl">
</p>

5. Get value

getEmail(event: Event) {
  event.preventDefault();
  console.log(this.emailCtrl.value);
}

<p>
  Email: <br/>
  <input type="email" fromControlName="email">
</p>
<button type="button" (click)="getEmail($event)">Save</button>

this.emailCtrl.valueChanges
.subscribe(value => {
  console.log(value);
});

6. Debounce

this.emailCtrl.valueChanges
.pipe(
  debounceTime(500)
)
.subscribe(value => {
  console.log(value);
});

7. Validations

emailCtrl = new FormControl('', [Validators.required]);

8. Show validations

<p>
  Email: <br/>
  <input type="email" [formControl]="emailCtrl">
</p>
<p>
  <small *ngIf="emailCtrl.hasError('required') && emailCtrl.dirty">El campo es requerido</small>
</p>
<button [disabled]="emailCtrl.invalid" type="button" (click)="getEmail($event)">Save</button>

9. Group validations

emailCtrl = new FormControl('', [Validators.required]);

<p>
  Email: <br/>
  <input type="email" [formControl]="emailCtrl"> <br/>
</p>
<div>
  <p *ngIf="emailCtrl.errors && emailCtrl.dirty">
    <small *ngIf="emailCtrl.hasError('required')">El campo es requerido</small>
    <small *ngIf="emailCtrl.hasError('minlength')">Debe ser mínimo de 4</small>
  </p>
</div>
<button [disabled]="emailCtrl.invalid" type="button" (click)="getEmail($event)">Save</button>