繁体   English   中英

反应性表单:计算formGroup中的所有formControl

[英]Reactive forms: Count all formControls in a formGroup

我现在已经对反应式表单做了很多工作,并且非常喜欢它的概念。 但是,我想知道是否有一种简单的方法可以对formGroup中的所有formControl进行计数,还是我必须对此进行迭代?

我有一个复杂的嵌套formGroup结构,具有6层或7层,因此可以节省一些时间。

任何提示都欢迎:)

您可以递归进行。

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

现场演示

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

Object.keys(yourFormGroup.controls

如果有多个FormGroup ,则无论如何都要对其进行迭代。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM