Как проверить formcontrol с предварительно заполненными данными в Angular 5?

Question

У меня есть форма-группа. В группе форм у меня есть массив форм. Я инициализировал массив элементами, созданными из данных в модели данных, с помощью метода, описанного в документации angular по реактивным формам, в разделе Initialize secretLairs FormArray. Проблема заключается в том, что мне нужно выполнить validation.required для каждого элемента управления формы в массиве. Однако, поскольку элементы управления формой уже содержат значения, я не знаю, как выполнить validation.required. Документация не пошла дальше о том, как проверять формы управления в formarray, которые предварительно заполнены.

Вот мои исходные коды:

.html

    <!-- list of Questions -->
   <div formArrayName="questions">
     <!-- <div *ngFor="let que of Questions; let k=index"> -->
      <div *ngFor="let question of Ques ; let i=index" [formGroupName]="i" >

        <!-- The repeated questions template -->
      <h4>{{question.ques}}</h4>
      <div style="margin-left: 1em;">
        <!-- <div class="form-group">
         <label class="center-block">
          <input class="form-control" formControlName="ques" >
         </label>
            </div> -->

         <div class="form-group radio" *ngFor="let choice of 
         question.choices; let j = index">

         <input type="radio"  formControlName="choices"
         class="custom-control-input" [value]="choice.choiceText">
         <label>{{choice.choiceText}}</label>
         </div> 

         <br>
         <!-- End of the repeated questions template -->

         </div>
         </div>
         </div>
         <button type="submit" class="btn btn-danger" 
         [disabled]="!CheckListForm.valid">Submit</button>
         </form>

.ts

  export class CheckListFormComponent implements OnInit, OnChanges {

  CheckListForm: FormGroup;

  Ques: Questions[];

  employmenttype = ['Permanent', 'contractor'];



   constructor(private fb: FormBuilder,
               private checklistservice: ChecklistService) { 
      this.CreateForm();

                                                            }

     ngOnInit() {
    this.checklistservice.getQuestions(1).subscribe(res =>{ this.Ques =res;
    this.setquestions(this.Ques)
                 }); 


    this.CheckListForm.get('EmploymentType').valueChanges.subscribe(

    (EmploymentType: string) => {
      if (EmploymentType === 'Permanent') {
        this.CheckListForm.get('HRMS').setValidators([Validators.required]);

     this.CheckListForm.get('CompanyName')
      .setValidators([Validators.nullValidator]);
      } else if (EmploymentType === 'contractor') {

        this.CheckListForm.get('CompanyName').
        setValidators([Validators.required]);

        this.CheckListForm.get('HRMS').
        setValidators([Validators.nullValidator]);
                                                 }

         this.CheckListForm.get('HRMS').updateValueAndValidity();
         this.CheckListForm.get('CompanyName').updateValueAndValidity();
                                                               }
                                                                   )
                                                                        }




 CreateForm() {
 this.CheckListForm = this.fb.group({

 name: ['', Validators.required],
 EmploymentType: ['', Validators.required],
 HRMS: [''],
 CompanyName:[''],
 questions: this.fb.array([]) 
  })
  }


get questions(): FormArray {
return this.CheckListForm.get('questions') as FormArray;
                           }

setquestions(questions: Questions[]) {  
const QuestionsFGs = questions.map(questions => this.fb.group(questions));
const QuestionsFormArray = this.fb.array(QuestionsFGs);
this.CheckListForm.setControl('questions', QuestionsFormArray);
 }

Answer 1

Как обычно, поскольку никто не отвечает, я выложу ответ, который я кропотливо решил.

Вы не можете проверять элементы управления формой с помощью метода, который я выполнил (см. Мои коды). Причина в том, что элементы управления форм уже содержат данные и не являются пустыми. Следовательно, validation.required не будет работать.

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

Validation.required будет работать для этого случая.