MyValidators.ts
import {FormControl} from '@angular/forms'; export class MyValidators { static forbiddenNames(control: FormControl): { [s: string]: boolean } { const forbidden = ['Mahmood', 'Reza', 'Ahmad']; if (forbidden.indexOf(control.value) !== -1) { return {'nameIsForbidden': true}; } return null; } }
app.component.html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> <div formGroupName="userData"> <div class="form-group"> <label for="username">Username</label> <input type="text" id="username" class="form-control" formControlName="username"> <span *ngIf="!signupForm.get('userData.username').valid && signupForm.get('userData.username').touched" class="help-block"> <span *ngIf="signupForm.get('userData.username').errors['nameIsForbidden']"> This name is invalid! </span> <span *ngIf="signupForm.get('userData.username').errors['required']"> This field is required! </span> </span> </div> <div class="form-group"> <label for="email">email</label> <input type="text" id="email" class="form-control" formControlName="email"> <span *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched" class="help-block">Please enter a valid email</span> </div> </div> <div class="radio" *ngFor="let gender of genders"> <label> <input type="radio" [value]="gender" formControlName="gender">{{ gender }} </label> </div> <div formArrayName="hobbies"> <h4>Your hobbies</h4> <button class="btn btn-default" type="button" (click)="onAddHobby()">Add Hobby </button> <div class="form-group" *ngFor="let hobbyControl of signupForm.get('hobbies').controls;let i=index"> <input type="text" class="form-control" [formControlName]="i"/> </div> </div> <span *ngIf="!signupForm.valid && signupForm.touched" class="help-block">Please enter valid data</span> <button class="btn btn-primary" type="submit">Submit</button> </form> </div> </div> </div>