Validating form input

We have now created and simplified our reactive form in the previous section, but we want to make our forms accurate in accepting data and at the same time create a user-friendly experience for the user to let them know easily what the valid values for each control are. Now, we will learn how to add validations to our reactive forms.

In reactive forms, we are adding validators as parameters directly to the form controls in the component class instead of adding them as an attribute in the template.

Built-in validators

Angular provides several built-in validator functions that we can use directly in our forms. Let’s have a look at some of these:

• static min(min: number)—Requires the value of the control to be equal to or greater than the given number:

  form = this.fb.group({

    name: [10, [Validators.min(4)]]

  });

  console.log(this.form.status) // returns VALID

  static max(max: number) – requires the value of the control to be...