In the last post I introduced angular 2’s model driven form approach. In this post I’m going to go through how to implement validation rules on a model driven form …

Standard validators

At the moment there seem to be 3 standard validators which pretty much do what they say on the tin:

• Validators.required
• Validators.minLength
• Validators.maxLength

Here’s some component code that references the standard required and minLength validators:

export class LoginComponent {
  loginForm: ControlGroup;
  constructor(builder: FormBuilder) {
    this.loginForm = builder.group({
      userName: ["", Validators.required],
      password: ["", Validators.minLength(6)]
    });
  }
}

Multiple validators

You can use Validators.compose to specify multiple validators for a field:

export class LoginComponent {
  loginForm: ControlGroup;
  constructor(builder: FormBuilder) {
    this.loginForm = builder.group({
      userName: ["", Validators.required],
      password: [
        "",
        Validators.compose([Validators.minLength(6), Validators.maxLength(12)])
      ]
    });
  }
}

#angular #standard validators #multiple validators #custom validation