Question

官方Angular文档的dynamic form tutorial包含动态表单的故事。服务用于创建FormGroup对象，如下所示：

    toFormGroup(questions: QuestionBase<any>[] ) {
    let group: any = {};

    questions.forEach(question => {
      group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
                                              : new FormControl(question.value || '');
    });
    return new FormGroup(group);
  }

如何为每个FormControl对象添加多个验证器函数？以下似乎不起作用：

questions.forEach(question => {
      group[question.key] = question.required ? new FormControl(question.value || '', [Validators.required, Validators.maxLength(12)])
                                              : new FormControl(question.value || '');
    });

我也试过了Validators.compose([Validators.required, Validators.maxLength(12)])，它也没有像预期的那样工作。似乎应用的唯一验证器是“必需”＆＃39;验证器。这是展示行为的plnkr。上面提到的代码包含在question-control.service.ts文件中。

我试图实现的预期结果是将maxLength验证器也应用于FirstName控件。

Answer 1

验证实际上已经到位，但是目前您只是检查该字段是否无效：

<div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>

如果字段无效，那么当然会显示此消息。

快速解决方案是检查哪个错误字段：

<div class="errorMessage" *ngIf="form.controls[question.key].hasError('required')">
   {{question.label}} is required
</div>
<div class="errorMessage" *ngIf="form.controls[question.key].hasError('maxlength')">
   {{question.label}} is too long
</div>

plunker：https://plnkr.co/edit/RQRQiJfQbnOHEPuS0jji?p=preview

但由于您的表单是动态的，我猜您还希望尽可能动态的验证。为此，我建议您查看 official docs 中的此示例，该示例使用对象formErrors和validationMessages并存储所有验证消息，然后使用只要表格有变化，这些就与这种方法一起：

onValueChanged(data?: any) {
  if (!this.heroForm) { return; }
  const form = this.heroForm;

  for (const field in this.formErrors) {
    // clear previous error message (if any)
    this.formErrors[field] = '';
    const control = form.get(field);

    if (control && control.dirty && !control.valid) {
      const messages = this.validationMessages[field];
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + ' ';
      }
    }
  }
}

Answer 2

您可以做的是将每个问题的必要验证放入数组中，我这样做是这样的：

toFormGroup(questions: QuestionBase<any>[] ) {
    const group: any = {};
    let validaciones = [];
    questions.forEach(question => {
      if (question.required) {
        validaciones.push(Validators.required);
      }
      // Validación para solo números
      if (question.number) {
        validaciones.push(Validators.pattern(/^([0-9])*$/));
      }

      group[question.key] = new FormControl(question.value || '', validaciones);
      validaciones = [];

    });

如果您想看看，我将存储库留在GitHub上 https://github.com/aleRozo/formulariosDinamicos/

具有多个验证器的角度动态表单示例

2 个答案: