响应式表单：计算 formGroup 中的所有 formControl

Question

我现在一直在使用响应式表单做很多事情，并且非常喜欢它的概念。但是，我想知道是否有一种简单的方法来计算 formGroup 中的所有 formControl，或者我是否必须对其进行迭代？

我有一个 6 或 7 层的复杂嵌套 formGroup 结构，这样可以节省我一些时间。

欢迎任何提示:)

Answer 1

FormGroup的属性controls是一个对象。要计算它的键，您可以轻松地执行以下操作：

Object.keys(yourFormGroup.controls

如果有不止一个 FormGroup 你应该迭代它们。

Answer 2

你可以递归地做。

const countControls = (control: AbstractControl): number => {
  if (control instanceof FormControl) {
    return 1;
  }

  if (control instanceof FormArray) {
    return control.controls.reduce((acc, curr) => acc + countControls(curr), 1)
  }

  if (control instanceof FormGroup) {
    return Object.keys(control.controls)
      .map(key => control.controls[key])
      .reduce((acc, curr) => acc + countControls(curr), 1);
  }
}

用法示例：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fg: FormGroup;

  constructor(private fb: FormBuilder) {
    this.fg = this.fb.group({
      two: this.fb.group({
        three: [''],
        four: [''],
        five: [''],
      }),
      six: this.fb.group({
        seven: [''],
        eight: [''],
        nine: this.fb.group({
          ten: [''],
          eleven: this.fb.array([
            this.fb.control(''),
            this.fb.control(''),
            this.fb.control(''),
          ])
        }),
      }),
    });

    // prints 14
    console.log(countControls(this.fg));  
  }
}

Live demo

响应式表单：计算 formGroup 中的所有 formControl

Reactive forms: Count all formControls in a formGroup

angular

angular-reactive-forms