Как сделать так, чтобы радиокнопки были отключены по умолчанию, если они находятся под одной и той же формгруппой в angular 2+?

Question

Данные связаны с переключателями через данные из базы данных (Web-API). Мои полные коды следующие:

component.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 #{{i + 1}}</h4>
 <div style="margin-left: 1em;">
   <div class="form-group">
     <label class="center-block">
       <input class="form-control" formControlName="ques" disabled>
     </label>
    </div>


 <div class="form-group radio" *ngFor="let choice of question.choices ">
      <input type="radio"  formControlName="choices"
          class="custom-control-input" [value]="choice">
      <label>{{choice.choiceText}}</label>
    </div> 

component.ts

export class CheckListFormComponent implements OnInit, OnChanges {

  Ques: Questions[];

  Questions: any = [];

  choices: Choices;


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

   }

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

    this.checklistservice.getQuestions(1).subscribe(res =>{ 
      this.Questions = res;
    console.log(this.Questions)
  }); 

   this.Questions.forEach(q => {
   this.choices = q.choices;
     });
                }


    ngOnChanges() {

                  }


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

     name: ['', Validators.required],
     EmploymentType: ['', Validators.required],
     HRMS: ['', Validators.required],
     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);
                                        }


                                  }

Использование этих кодов в моем формате позволяет создавать радиокнопки с одним из отмеченных параметров (только 2 варианта). Мне нужно спроектировать радиокнопки таким образом, чтобы обе кнопки оставались непроверенными. Это так, что когда пользователь отправляет форму, непроверенные радиокнопки создадут ошибку проверки, поскольку все поля формы являются обязательными. Как убедиться, что ни одна из радиокнопок не включена по умолчанию?

Answer 1

Нет ответа, как обычно, поэтому я продолжу отвечать на свой вопрос.

Чтобы решить эту проблему, вам нужно будет создать новые элементы управления формой для каждой модели вопроса в массиве вопросов. Установите validation.required для элемента управления формы.

Затем выполните итерацию модели выбора с помощью элементов управления формой, и переключатель по умолчанию отключен.