无法在 FormArray 中的 FormGroup 内设置动态验证器 - Angular

Question

我在 Angular 响应式表单中有一个查询。

我有下面的 formGroup，在那个 formGroup 里面，我有一个 formArray，在那个 formArray 里面，我有另一个 formGroup。这里是主窗体Group

public formGroup = this.formBuilder.group({
    email: ["", Validators.required],
    address: this.formBuilder.array([
        this.initFun()
    ])
});

这里是 formArray initFun() 函数

fun() {
    return this.formBuilder.group({
        city: [""],
        state: [""]
    });
}

现在的查询是我想动态地将验证程序设置为城市和州。

在 formGroup 中向 formArray 添加动态验证器的方法是什么？

我可以使用以下语法将验证器设置为电子邮件：

this.formGroup.controls["email"].setValidators(Validators.required);

但是我无法在地址数组中为城市和州设置验证器。

任何帮助将不胜感激:)

更新

我已经创建了上述案例的示例，您可以在此处查看：https://stackblitz.com/edit/reactive-form-angular

如果我在这里做错了什么，请告诉我。

Answer 1

您可以遍历 fb.array 中的每个组并像这样设置所有需要的验证器：

let groupItems = this.formGroup.controls["address"].controls;

for(let item of groupItems) {
    item.controls["city"].setValidators(...);
    item.controls["state"].setValidators(...);
}

UPD：要避免 "Property 'controls' does not exist on type 'AbstractControl'" 问题，请使用以下赋值：

let groupItems:any = (this.formGroup.get("address") as FormArray).controls;

Answer 2

您可以尝试通过声明一个 return 它

的方法来获取地址 FormArray

get address(): FormArray {
  return this. formGroup.get("address") as FormArray;
}

之后就可以使用at的方法获取里面具体的formGroup了

this.address.at(index)

之后只需将 Validator 分配给 formControl

根据您的LINK

更新

你的代码看起来像

  ngOnInit() {
    this.formGroup.controls["email"].setValidators(Validators.required);
    let groupItems = this.formGroup.get("address") as FormArray;;
    groupItems
    for(let index = 0 ; index < groupItems.length; index++ ) {
        groupItems.at(index).get("city").setValidators(Validators.required);
        groupItems.at(index).get("country").setValidators(Validators.required);
    }
  }

Answer 3

感谢安娜，

这是我上述问题的更新答案。您可以参考此 link 作为参考。 https://stackblitz.com/edit/reactive-form-angular

有什么问题可以问我:)

无法在 FormArray 中的 FormGroup 内设置动态验证器 - Angular

Not Able To Set Dynamically Validator Inside FormGroup in FormArray - Angular

angular2-forms

angular

angular-reactive-forms