Question

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

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

欢迎任何提示：）

Answer 1

你可以递归地做。

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

Answer 2

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

Object.keys(yourFormGroup.controls

如果有多个FormGroup，你应该迭代它们。

反应形式：计算formGroup中的所有formControl

2 个答案: