Angular2 Form: Get Specific Error Type for Multiple Validators

Posted on   |   In ,   |  

There are 2 ways

1
2
3
4
5
myFormCtrl: FormControl;
...
this.myFormCtrl = new FormControl('', [Validators.required, Validators.maxLength(25)]);

you can either use safe-navigation (Elvis) operator .?

1
2
3
<input class="form-control" type="text"  [formControl]="myFormCtrl" />
<span class="alert alert-danger" *ngIf="myFormCtrl.errors?.maxlength"> too long </span>
<span class="alert alert-danger" *ngIf="myFormCtrl.errors?.required"> required </span>

or

1
2
3
<input class="form-control" type="text"  [formControl]="myFormCtrl" />
<span class="alert alert-danger" *ngIf="myFormCtrl.hasError('maxlength')"> too long </span>
<span class="alert alert-danger" *ngIf="myFormCtrl.hasError('required')"> required </span>