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).
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With