Mastering Angular Reactive Forms/

...

/

Solution: Asynchronous Validation

Solution: Asynchronous Validation

Analyze a possible implementation for the async validation assignment.

We'll cover the following...

The component class

In the component class, we define the reactive form structure.

TypeScript 3.3.4
  registerForm = this.fb.group({
    name: [''],
    username: ['',
      [Validators.required, Validators.minLength(3)],
      [UserValidator.usernameValidator(this.userService)],
    ],
    pwd: ['', [Validators.required]],
    terms: [false, [Validators.requiredTrue]],
  });

  • Line 4: For the username field, we use the built-in validators to add synchronous validation as defined in the requirements.

  • Line 5: We add the asynchronous validator, UserValidator.usernameValidator(this.userService). The target service is added as a parameter to reduce the coupling with the custom validator.

  • Line 8: As the terms field is bound to a checkbox element in the template, we can use the Validators.requiredTrue ...