Angular 5 Forms Update
Angular 5 is here and many changes have been made to further improve the framework.
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:
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:
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:
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:
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.