Angular form updateValueAndValidity of all children controls

问题

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.

回答1:

It is not possible at the moment to update the descendants of an AbstractControl (FormGroup, ...) with the AbstractControl itself. Maybe in a future release it will be possible.

https://github.com/angular/angular/issues/6170

https://github.com/angular/angular/issues/22166

update: a pull request is already open https://github.com/angular/angular/pull/19829

回答2:

I solved my issue, which was similar to yours, by recursing the controls and manually triggering the update. Probably this is not an optimal solution:

private triggerValidation(control: AbstractControl) {
    if (control instanceof FormGroup) {
        const group = (control as FormGroup);

        for (const field in group.controls) {
            const c = group.controls[field];

            this.triggerValidation(c);
        }
    }
    else if (control instanceof FormArray) {
        const group = (control as FormArray);

        for (const field in group.controls) {
            const c = group.controls[field];

            this.triggerValidation(c);
        }
    }

    control.updateValueAndValidity({ onlySelf: false });
}

回答3:

validateFormFields(fields) {
    try {
      Object.entries(fields.controls).forEach((control: any) => {
        if (typeof control[0] == 'Array' 
        ) {
          this.validateFormFields(control[1]);
        } else {
          if (control[1].controls) {
            Object.entries(control[1].controls).forEach((c: any) => {
              c[1].touched = true;
            });
          } else {
            control[1].touched = true;
          }

        }
      });
    } catch (e) {
      console.log(e);
    }
  }

来源：https://stackoverflow.com/questions/46990726/angular-form-updatevalueandvalidity-of-all-children-controls