Проверка формы со списком ввода переменных в 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

Я думаю, что есть несколько решений вашего вопроса, но одним из способов достижения этого было бы использование Reactive Forms.

Вы бы l oop через ваш "formQuestionsFormatted" в ngOnInit вашего компонента и создали то, что называется "FormArray" в Reactive Forms. В вашем FormArray у вас будет один FormControl для каждого вопроса, и вы установите для каждого из них «Validators.required».

Затем, когда вы хотите проверить, является ли он действительным, вы можете вызвать «myFormArray.valid». , и это будет верно только в том случае, если на все ваши вопросы будут даны ответы.

(Вам нужно будет прочитать о Реактивных формах, если вы не использовали их раньше. Они очень мощные, когда вы хотите делать сложные формы , но это может занять некоторое время, чтобы научиться их использовать.)