Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use updateOn: 'blur' in Angular Reactive Forms

Tags:

I would like to start the validation of the fields of my forms only when the user leave the field (onblur).

I'm trying in this way:

    this.profileForm = this.fb.group({                 firstName: ['initial value',                     [Validators.required, Validators.minLength(2), forbiddenNameValidator(/bob/i)],                     [forbiddenNameValidatorAsync()],                     { updateOn: 'blur' }                 ],                 lastName: ['b']             });  

But in this way it does not work. The validations (sync and async) are performed during onChange.

I would also like to ask how you can verify the name by making checks on the lastName.

Example: I would like the name field to be disabled if it is the same as the last name (only name field, not entire form not both fields).

like image 813
user3471528 Avatar asked Sep 04 '18 13:09

user3471528


People also ask

What is Updateon in angular?

When using Angular Forms, by default, on every keystroke, the values of your form controls are updated and their associated validators are executed. This may not be always desirable.

How do you clear value in Reactive form?

In Reactive forms, we need to import FormGroup from '@angular/forms' . After importing the above-mentioned modules in the respective approach, angular forms module provides an inbuilt method called reset(). We can use the method and we can reset the form.

Is data binding done in Reactive forms?

We can perform Two way binding in Template driven forms but there is no two way binding in Reactive forms. Angular provides the methods to update the values from the component class. Reactive forms are used on complex cases, like dynamic forms element, dynamic validations etc.


1 Answers

Set params as AbstractControlOptions

    firstName: ['initial value',{          validators: [Validators.required, Validators.minLength(2), forbiddenNameValidator(/bob/i)],          asyncValidators: [forbiddenNameValidatorAsync()],          updateOn: 'blur'     }], 

Example here https://stackblitz.com/edit/angular-hdna17?file=src%2Fapp%2Fhello.component.ts

like image 62
Kliment Ru Avatar answered Sep 27 '22 18:09

Kliment Ru