角迭代反应形式控件和子级子控件等 [英] Angular Iterate over Reactive Form Controls and Subchildren etc

问题描述

我需要遍历Formbuilder中的所有控件以及子Formbuilder来清除验证器和updateValueAndValidity.如何从这里更新答案呢?

I need to iterate through all controls in Formbuilder, and children formbuilders to clear validators and updateValueAndValidity. How can I update answer from here to do so ?

角度2:遍历反应式表单控件

Object.keys(this.form.controls).forEach(key => {
    this.form.controls[key].clearValidators();
    this.form.controls[key].updateValueAndValidity();
  });

此表单在formbuilders中具有formbuilders等.上面的答案仅影响顶级子级，而不影响子级子级等

This form here has formbuilders within formbuilders, etc. The answer above only affects top level children, not subchildren, etc

this.editSharedForm = this.formBuilder.group({
  'name': [null, [Validators.maxLength(50)]],
  'streetAddress': [null, [Validators.maxLength(50)]],
  'city': [null, [Validators.required,Validators.maxLength(200)]],
  'zipcode': [null, [Validators.maxLength(10)]],
  'phoneNumber': [null, [Validators.maxLength(50)]],
  'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
  'addressChangeReason': this.formBuilder.group({
    'addressChangeReasonId': [null,  [Validators.required, Validators.min(1)]],
    'addressChangeReasonCode': [null, [Validators.required, Validators.maxLength(50)]],
    'addressChangeReasonDescription': [null, [Validators.required, Validators.maxLength(255)]]
  }),
  'addressSource': this.formBuilder.group({
    'sourceOfAddressId': [null, [Validators.required, validatorDropdown]],
    'sourceOfAddressCode': [null, [Validators.required, Validators.maxLength(50)]],
    'sourceOfAddressDescription': [Validators.required, Validators.maxLength(255)]]
  })
});

}

2) 另外，如果需要，我如何只定位1个子子级(例如addressChange原因)? 以下操作无效

2) Additionally, how can I just target 1 subchild (eg addressChange Reason) if needed ? Following is not working

Object.keys(this.editSharedForm.get('addressChangeReason').controls).forEach(key => {
  this.editSharedForm.controls[key].clearValidators();
  this.editSharedForm.controls[key].updateValueAndValidity();
});

类型"AbstractControl"上不存在属性控件"

Property 'controls' does not exist on type 'AbstractControl'

推荐答案

因此，如果要在每个嵌套的FormControl上调用clearValidators和updateValueAndValidity，则必须遍历所有嵌套的FormGroups和.

So, if you want to call clearValidators and updateValueAndValidity on every nested FormControl, you must loop through all nested FormGroups and FormArrays.

在这个快速示例中可以很简单地看到它:

It's quite simple as you can see in this quick example:

clearValidators(formGroup: FormGroup| FormArray): void {
  Object.keys(formGroup.controls).forEach(key => {
    const control = formGroup.controls[key] as FormControl | FormGroup | FormArray;
    if(control instanceof FormControl) {
      console.log(`Clearing Validators of ${key}`);
      control.clearValidators();
      control.updateValueAndValidity()
    } else if(control instanceof FormGroup || control instanceof FormArray) {
      console.log(`control '${key}' is nested group or array. calling clearValidators recursively`);
      this.clearValidators(control);
    } else {
      console.log("ignoring control")
    }
  });

问题2)

只需致电

clearValidators(this.editSharedForm.get('addressChangeReason'))

https://stackblitz.com/edit/angular-dzsrq8

这篇关于角迭代反应形式控件和子级子控件等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！