Challenge: Making a Reactive Form Valid

Implement reactive form validation in Angular.

Challenge description

In this challenge, we’ll use the FormGroup, FormControl, and Validators directives in Angular to implement form validation. We’ll follow the steps below to implement this:

  1. Import the ReactiveFormsModule in the app.module.ts file.
  2. In the app.component.html file, we’ll set the formControlName directive in the input tags and the formGroup directive in the form tag. The variable name for the formGroup has already been created in the app.component.ts file. It’s called formValidity.
  3. In the app.component.ts file, we’ll import FormGroup, FormControl, and Validators.
  4. Inside the constructor, we’ll configure FormGroup, FormControl, and Validators. The expected output should look like the image we have below:

Get hands-on with 1300+ tech skills courses.