Menu
In my Angular 4 app, I have a form with several controls.
At some points I need to force the update of their validity, so I'm doing:
this.form.get('control1').updateValueAndValidity(); this.form.get('control2').updateValueAndValidity(); this.form.get('control3').updateValueAndValidity(); // and so on.... and then:
this.form.updateValueAndValidity(); this works fine.
However I was wondering if there is a better way to accomplish the same thing, by just calling one method on the parent form.
According to its documentation, the updateValueAndValidity() method:
By default, it will also update the value and validity of its ancestors.
but in my case I need to update the value and validity of its descendants. So I can get rid of many lines of code.
872
updateValueAndValidity allows you to modify the value of one or more form controls and the flag allows you to specify if you want this to emit the value to valueChanges subscribers. angular.io/docs/ts/latest/api/forms/index/…
What are form controls in Angular? In Angular, form controls are classes that can hold both the data values and the validation information of any form element. Every form input you have in a reactive form should be bound by a form control. These are the basic units that make up reactive forms.
It provides some of the shared behavior that all controls and groups of controls have, like running validators, calculating status, and resetting state. It also defines the properties that are shared between all sub-classes, like value , valid , and dirty . It shouldn't be instantiated directly.
From Angular 8 you can simply use. this. form. markAllAsTouched(); To mark a control and it's descendant controls as touched.
As per angular2's final release updateValue has been changed to setValue so the new syntax should be like this changeUserSelection (value) { this.updateForm.controls ['user'].setValue (value); } The updateValueAndValidatity need to be called to trigger the validator functions.
The updateValueAndValidity () method belongs to the AbstractFormControl class. The whole point of the method is to recalculate the value as well as the validation status of the field. That method, by the way, accepts a couple of parameters. But they're optional. You can just go with empty parentheses.
You can subscribe to value changes of a control or the whole form. updateValueAndValidity allows you to modify the value of one or more form controls and the flag allows you to specify if you want this to emit the value to valueChanges subscribers. angular.io/docs/ts/latest/api/forms/index/…
What happens is that, under the hood, the Angular forms module is applying to each native HTML element a built-in Angular directive, which will be responsible for tracking the value of the field, and communicate it back to the parent form. This type of special directive is known as a control value accessor directive.
I had the same situation for me to update FormGroup | FormArray at nested level controls.
check this out(worked for me):
/** * Re-calculates the value and validation status of the entire controls tree. */ function updateTreeValidity(group: FormGroup | FormArray): void { Object.keys(group.controls).forEach((key: string) => { const abstractControl = group.controls[key]; if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) { updateTreeValidity(abstractControl); } else { abstractControl.updateValueAndValidity(); } }); } 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
