在验证 Angular 6 中使用 FormArray答案

【问题标题】：Using FormArray in Validation Angular 6在验证 Angular 6 中使用 FormArray
【发布时间】：2019-05-14 23:03:44
【问题描述】：

我的页面中有大约 50 个控件（使用选项卡），我更担心的一件事是验证部分，我可以看到相同的 Validators 再次与所有控件重复。

我可以将验证器分为 2 个，

1. [Validators.required, Validators.maxLength(50)]
2. Validators.required

但我使用的是常规验证方法，因此我的代码会变得更长。无论如何我可以使用 2 FormArray 来包含控件并应用验证？

  this.candidateForm = new FormGroup({
      firstName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      lastName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      fatherName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      motherName: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      placeOfBirth: new FormControl('', Validators.required),
      nationalityList: new FormControl('', Validators.required),
      dateOfBirth: new FormControl('', [Validators.required, Validators.maxLength(50)]),
      genderList: new FormControl('', Validators.required),
    });

可以让这段代码更容易阅读吗？

类似的，

FormArray[] values = formControl{ control1, control2, control3};
FormArray[] values2 = formControl{ control4, control5, control6};

validation1 = [Validators.required, Validators.maxLength(50)]
validation2 = [Validators.required]

values = Validation1
values2 = Validation2

这样，如果增加了，我可以添加控件。

【问题讨论】：

标签： angular typescript form-control formarray

【解决方案1】：

我会创建一个函数：例如

function createFormControl(maxLen: number = 0) {
  const validators = [Validators.required];
  if (maxLen > 0) validators.push(Validators.maxLength(maxLen));
  return new FormControl('', validators)
}

并像这样使用它：

const MAX_LEN = 50;
this.candidateForm = new FormGroup({
      firstName: createFormControl(MAX_LEN),
      lastName: createFormControl(MAX_LEN),
      ...
      placeOfBirth: createFormControl(),

【讨论】：