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

问题描述

我需要遍历 Formbuilder 中的所有控件和子表单构建器以清除验证器和 updateValueAndValidity.我怎样才能从这里更新答案?

Angular 2:迭代响应式表单控件

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

这里的表单在表单构建器中包含表单构建器等.上面的答案只影响顶级子级，不影响子级等

this.editSharedForm = this.formBuilder.group({'name': [null, [Validators.maxLength(50)]],'streetAddress': [null, [Validators.maxLength(50)]],'city': [null, [Validators.required,Validators.maxLength(200)]],'邮政编码': [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 Reason)?以下不起作用

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

<块引用>

类型AbstractControl"上不存在属性controls"

解决方案

所以，如果你想在每个嵌套的 FormControl 上调用 clearValidators 和 updateValueAndValiditycode>，您必须遍历所有嵌套的 FormGroups 和 FormArrays.

正如您在这个快速示例中看到的那样，它非常简单:

clearValidators(formGroup: FormGroup| FormArray): void {Object.keys(formGroup.controls).forEach(key => {const control = formGroup.controls[key] as FormControl |表单组 |表格数组；如果(窗体控件的控件实例){console.log(`清除${key}`的验证器);control.clearValidators();control.updateValueAndValidity()} else if(control instanceof FormGroup || control instanceof FormArray) {console.log(`control '${key}' 是嵌套组或数组.递归调用 clearValidators`);this.clearValidators(控制);} 别的 {console.log("忽略控制")}});

对于问题 2)

只需调用

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

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

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 ?

Angular 2: Iterate over reactive form controls

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

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) 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();
});

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

解决方案

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")
    }
  });

For question 2)

Simply call

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

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

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