Sharing Top Content from the Angular-sphere.

Boosting Performance With The New updateOn Option in Angular v5

  • In this article, I want to expatiate on a handy feature that was added to the Angular Forms API — the updateOn option.By default, whenever a value of a FormControl changes, Angular runs the control validation process.So, for example, if you have an input that is bound to a form control, Angular…
  • For example:this.login = new FormGroup({ email: new FormControl(), password: new FormControl()}, { updateOn: ‘submit’ });onUpdate submit exampleIn the above example, both the controls will be updated on submit unless one of the children explicitly specified a different updateOn value.
  • For example:this.login = new FormGroup({ email: new FormControl(null, { validators: Validators.required, updateOn: ‘blur’ }), password: new FormControl(null, [Validators.required])}, {updateOn: ‘submit’})Forms Module UsageTo use it with the Forms Module, we need to set the updateOn option to blur or submit in ngModelOptions.
  • For example:form [ngFormOptions]=”{updateOn: ‘submit’}” input name=”email” ngModel type=”email” input name=”password” ngModel type=”email”/formIn the above example, both the controls will be updated on submit unless one of the children explicitly set its own updateOn value in ngModelOption.
  • For example:form [ngFormOptions]=”{updateOn: ‘submit’}” input name=”email” ngModel type=”email” [ngModelOptions]=”{updateOn: ‘blur’}” input name=”password” ngModel type=”email”/formThanks to Kara Erickson for her detailed commits messages.Follow me on Medium or Twitter to read more about Angular, Vue and JS!

Angular version 5 is about to drop and with her a new wave of features. In this article, I want to expatiate on a handy feature that was added to the Angular Forms API — the updateOn option. So, for…

Boosting Performance With The New updateOn Option in Angular v5Angular v5 updateOnAngular version 5 is about to drop and with her a new wave of features. In this article, I want to expatiate on a handy feature that was added to the Angular Forms API — the updateOn option.By default, whenever a value of a FormControl changes, Angular runs the control validation process.So, for example, if you have an input that is bound to a form control, Angular performs the control validation process for every keystroke.The ProblemImagine a form with heavy validation requirements, updating on every keystroke can sometimes be too expensive.Luckily, Angular version 5 provides a new option that improves performance by delaying form control updates until the blur or the submit event.Reactive Forms UsageTo use it with Reactive Forms, we need to set the updateOn option to blur or submit when we instantiate a new FormControl ( the default option is change )this.email = new FormControl(null, { updateOn: ‘blur’ });Or with validators:this.email = new FormControl(null, { validators: Validators.required, updateOn: ‘blur’});When working with FormGroup or FormArray we can use it to set the default updateOn values for all the form’s child controls. For example:this.login = new FormGroup({ email: new FormControl(), password: new FormControl()}, { updateOn: ‘submit’ });onUpdate submit exampleIn the above example, both the controls will be updated on submit unless one of the children explicitly specified a different updateOn value. For example:this.login = new FormGroup({ email: new FormControl(null, { validators: Validators.required, updateOn: ‘blur’ }), password: new FormControl(null, [Validators.required])}, {updateOn: ‘submit’})Forms Module UsageTo use it with…

Boosting Performance With The New updateOn Option in Angular v5