Angular

Angular 5 Forms Update


DemoCode

Angular 5 is here and many changes have been made to further improve the framework.
In the following let’s take a look at the update which has been made to the Angular Forms package.
You can now control for a form (or single form elements) when the value or the validity is updated. This feature has been available in AngularJS 1.x but missed in Angular 2+ so far. The following update options can now be used in Angular 5 forms:

  • change: change is the default mode. By using this update option the form / form control is updated after every single change.
  • blur: the blur change mode is only updated the from values / validity status after a form control lost the focus.
  • submit: updates are only done after form submit.

Setting The Update Mode

Angular supports two types of forms:

  • Template-driven forms
  • Reactive forms

So there are two ways of setting the update mode. Let’s take a quick look at both possibilities.
For template-driven forms you need to use the following syntax:

<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">

The ngModelOptions directive is used to set the updateOn property to the update mode you’d like to use for that input element.
Or if you’d like to active the update mode on form level you can apply the ngFormOptions directive to the <form> element and set the updateOn property as you can see in the following:

<form [ngFormOptions]="{ updateOn: 'submit' }">

Update Mode For Reactive Forms

In the last section you learned how to set the update mode in template-driven Angular forms. Now, let’s take a look at reactive forms.
As for template-driven forms you have the option of setting updateOn on form or form control level. First, let’s take a look at the following example:

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  })
});

A FormGroup is defined containing two FormControls. As a second parameter the FormControl configuration object is containing the updateOn property, so that the update behavior can be set for every single control separately.
Setting the update mode on form group level looks like the following:

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required
  }),
  lastname: new FormControl('', {
    validators: Validators.required
  })
}, { updateOn: 'blur' });

Conclusion

Controlling the update mode a form or a form control has been a feature many developers have been missing since the release of Angular 2 . With Angular 5 the gap is closed and you’ll be able to specify the update mode for forms and form controls. This is bringing back the flexibility from AngularJS 1.x.
Specifying the update mode is possible for both types of Angular forms: template-driven forms and reactive forms.

ONLINE COURSE: Angular - The Complete Guide

Check out the great Angular – The Complete Guide with thousands of students already enrolled:

Angular – The Complete Guide

  • This course covers Angular 5
  • Develop modern, complex, responsive and scalable web applications with Angular
  • Use their gained, deep understanding of the Angular  fundamentals to quickly establish themselves as frontend developers
  • Fully understand the architecture behind an Angular application and how to use it
  • Create single-page applications with on of the most modern JavaScript frameworks out there
Go To Course

 


Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments
    There are currently no comments.

    *