Angular Form Validation on Blur and Submit

In Angular 5, two new form validation techniques are introduced. Considering that you are familiar with FormBuilder, FormGroup, FormControl, Validators and etc. I’ll just jump into some examples.

To, give you a heads up, here is how our form model looks like,

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

@Component({
  selector: "app-user",
  templateUrl: "./user.component.html",
  styleUrls: ["./user.component.scss"]
})
export class UserComponent implements OnInit {
  userForm: FormGroup;

  get name() {
    return this.userForm.get("name");
  }

  get email() {
    return this.userForm.get("email");
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.userForm = this.fb.group({
      name: ["", [Validators.required]],
      email: ["", [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

Run the application and notice that the changes are immediately reflected in the form model and the validations are instant. That's cool but not the behavior you want when you have several Form Controls in your form model for performance reasons. But you can bypass this behavior using the updateOn: 'blur' and updateOn: 'submit' option.

So, the first one in our backpack is the updateOn: 'blur' option. Applying this will make the value of a Form Control change with the blur event of a native input element associated with it.

Take the following code example,

this.userForm = this.fb.group({
	name: ["", { validators: [Validators.required], updateOn: "blur" }],
	email: ["", [Validators.required, Validators.email]]
});

Notice that now we have modified the second parameter to an object. Along with the validators we have an option to tell the angular when to fire the input value change event. Here, the value of the name FormControl will get updated when we are blurred out of the native control it is attached to.

Rather than individually setting updateOn: 'blur', it can also be set on the parent Form Group to activate for every Form Control in the model.

this.userForm = this.fb.group(
  {
    name: ["", [Validators.required]],
    email: ["", [Validators.required, Validators.email]]
  },
  { updateOn: "blur" }
);

Run the application with the changes, and notice that, the value of an individual  Form Control is only updating in the form model when we are blurred out of it.

Similarly the updateOn: 'submit' option will make the value/values of the Form Control(s) change on a submit event fired on the native form element. The following code shows you how to achieve this behavior for all the Form Controls.

Make sure your submit button is not disabled for some reasons

this.userForm = this.fb.group(
  {
    name: ["", [Validators.required]],
    email: ["", [Validators.required, Validators.email]]
  },
  { updateOn: "submit" }
);

And that's it! updateOn: 'blur' and  updateOn: 'submit' are the options we were really craving while working with Angular Forms. Now it's available out of the box and you don't need any custom implementations.

Repository:

https://github.com/fiyazbinhasan/ng-playground/tree/ng-playground-updateon-blur-submit

Links:

https://angular.io/guide/reactive-forms