Angular?中变量输入列表的表单验证

Question

好吧，问题来了。我有一个问题列表，要么是输入，要么是垫子选择列表。这是一个父组件的子组件，可以生成具有不同问题的此表单的多个版本。我需要弄清楚的是，在向父级设置一些变量以确保表单完整之前，如何验证每个输入或选择列表都以某种方式得到了回答。

<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>

Answer 1

我认为你的问题有几种解决方案，但实现这一点的一种方法是使用反应式表单。

您将在组件的ngOnInit中循环使用"formQuestionsFormatted"，并在Reactive Forms中创建所谓的"FormArray"。在FormArray中，每个问题都有一个FormControl，并在所有问题上设置"Validators.required"。

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

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