Angular – ReactiveForm Simple Validation

Validation

In the form, we need required, minimum length, etc… We want the user to input correct info, and inform what is wrong.

ReactiveForm provides validation for each FormControl and cross-control

In this time, show basic validation (form and runtime code way)

Validation with FormBuilder

Add one more array parameter after default value.

this.testForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      //firstName: ['', []],
      lastName: ['', [Validators.required, Validators.maxLength(50)]],
      email: ['', [Validators.required, Validators.email]]
    });

First parameter is default value, next is array of validators

Runtime

The different way is runtime based on code

// Runtime
this.testForm.get('firstName').setValidators(Validators.required);
this.testForm.get('firstName').setValidators([Validators.required,
Validators.maxLength(30)]);
//this.testForm.get('firstName').clearValidators();
this.testForm.get('firstName').updateValueAndValidity();

Call setValidators and updateValueAndValidity with FormControl

Full Example

Let’s take a look sample

formvalidationsample.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './formvalidationsample.component.html',
  styleUrls: ['./formvalidationsample.component.css']
})
export class FormvalidationsampleComponent implements OnInit {

  testForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.testForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      //firstName: ['', []],
      lastName: ['', [Validators.required, Validators.maxLength(50)]],
      email: ['', [Validators.required, Validators.email]]
    });

    // Runtime
    this.testForm.get('firstName').setValidators(Validators.required);
    this.testForm.get('firstName').setValidators([Validators.required,
      Validators.maxLength(30)]);
    //this.testForm.get('firstName').clearValidators();
    this.testForm.get('firstName').updateValueAndValidity();
  }

  save() {
    console.log(this.testForm);
    console.log('Saved: ' + JSON.stringify(this.testForm.value));
  }
}

formvalidationsample.component.html

Next is HTML part

<h2>Home Builder Validation</h2>
<form (ngSubmit)="save()" [formGroup]="testForm">
    <input id="firstNameId" type="text"
        placeholder=""
        formControlName="firstName"
        [ngClass]="{'is-valid': (testForm.get('firstName').touched || testForm.get('firstName').dirty)
                &amp;&amp; !testForm.get('firstName').valid }"/>
    <br>

    <span class="invalid-feedback">
        <span *ngIf="testForm.get('firstName').errors?.required">
        Please enter your first name.
        </span>
        <span *ngIf="testForm.get('firstName').errors?.minlength">
        The first name must be longer than 3 characters.
        </span>
    </span>
    <br>
    <br>

    <input id="lastNameId" type="text"
        placeholder=""
        formControlName="lastName"
        [ngClass]="{'is-valid': (testForm.get('lastName').touched || testForm.get('lastName').dirty)
        &amp;&amp; !testForm.get('lastName').valid }"/>
    <br>

    <span class="invalid-feedback">
        <span *ngIf="testForm.get('lastName').errors?.required">
          Please enter your last name.
        </span>
        <span *ngIf="testForm.get('lastName').errors?.maxlength">
          The last name must be less than 50 characters.
        </span>
    </span>
    <br>
    <br>

    <input id="emailId" type="email"
        placeholder=""
        formControlName="email"
        [ngClass]="{'is-valid': (testForm.get('email').touched || testForm.get('email').dirty)}"/>
        <br>
    <button class="btn btn-primary mr-3"
        type="submit"
        style="width:80px"
        [disabled]="!testForm.valid">Save</button>        
</form>