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);
  }
}

Running the application will give you the following behavior,

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 subject to 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, 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 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" }
);

If you run the application with the changes, you will get the following behavior. Notice that, 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) subjected to change on a submit event fired on the native form element. Following code shows you how 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 for 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