在Angular中使用变量输入列表进行表单验证？答案

【问题标题】：Form validation with variable input list in Angular?在Angular中使用变量输入列表进行表单验证？
【发布时间】：2020-04-21 01:58:06
【问题描述】：

好的，问题来了。我有一个问题列表，要么是输入，要么是垫子选择列表。这是父组件的子组件，它可以产生具有不同问题的此表单的多个版本。我需要弄清楚的是如何能够验证每个输入或选择列表都以某种方式得到回答，然后再将一些变量设置为表单完整的父级。

<mat-horizontal-stepper>
  <mat-step *ngFor="let question of formQuestionsFormatted">
    <ng-template matStepLabel>{{ question.questionText}}</ng-template>
      <mat-label>{{ question.questionText }}</mat-label>

      <mat-form-field class="inputForm" *ngIf="!question.isSurveyOptionList">
        <input matInput placeholder="Answer" [(ngModel)]="question.responseInputText">
      </mat-form-field>

      <mat-radio-group *ngIf="question.isSurveyOptionList" [(ngModel)]="question.responseOptionSelected">
        <mat-radio-button class="example-radio-button" *ngFor="let option of question.surveyOptionList" [value]="option">
          {{option.optionText}}
        </mat-radio-button>
      </mat-radio-group>
  </mat-step>
</mat-horizontal-stepper>

【问题讨论】：

标签： angular forms validation angular-material

【解决方案1】：

我认为您的问题有多种解决方案，但实现此目的的一种方法是使用反应式表单。

您将在组件的 ngOnInit 中循环遍历“formQuestionsFormatted”，并在 Reactive Forms 中创建所谓的“FormArray”。在您的 FormArray 中，每个问题都有一个 FormControl，并且您可以在所有问题上设置“Validators.required”。

然后当你想检查它是否有效时，你可以调用'myFormArray.valid'，只有当你所有的问题都得到回答时它才是真的。

（如果您以前没有使用过响应式表单，则需要阅读它们。当您想做复杂的表单时，它们非常强大，但学习如何使用它们可能需要一些时间。）

【讨论】：