Как получить значение выбранного радиокнопки в FormArray в Angular? - PullRequest
Новая
       37

Как получить значение выбранного радиокнопки в FormArray в Angular?

0 голосов
/ 25 апреля 2020

Я получаю из бэкэнда список с объектами вопросов. В объекте у меня есть строка вопроса и массив возможных ответов. Мне нужно сделать это динамически, потому что я не знаю, сколько объектов я получу и сколько возможных ответов на вопросы. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить значение выбранной радиокнопки. Я не знаю, как связать это. Я пробовал разные вещи, но ни одна из них не увенчалась успехом. Это код, который у меня уже есть:

html файл: 

<form [formGroup]="radioButtonQuestionForm" (ngSubmit)="onSubmit()">
    <div formArrayName="radioButtonList">
      <div *ngFor="let item of radioButtonList().controls; let radioButtonIndex=index">
        <div [formGroupName]="radioButtonIndex">
          <br>
          <label>{{item.get('question').value}}</label>
          <div formArrayName="answers">
            <mat-radio-group>
              <div *ngFor="let element of item.controls.answers.controls; let j = index">  
                <div [formGroupName]="j">
                  <mat-radio-button [value]="item">{{element.get('answer').value}}</mat-radio-button>
                </div>
              </div>
            </mat-radio-group>
          </div>
        </div> 
      </div>
    </div>
  </form>

  <button class="btn btn-primary card-body-buttons" type="submit" form="ngForm" 
    (click)="onSubmit(radioButtonQuestionForm.value)">Submit</button>
</div>

файл ts: 

radioButtonQuestionForm: FormGroup;

constructor(
private route: ActivatedRoute, 
private surveyLinkService: SurveyLinkService,
private formBuilder: FormBuilder) {
this.guid = route.snapshot.params.id;

this.radioButtonQuestionForm = this.formBuilder.group({  
  radioButtonList: this.formBuilder.array([]), 
})
this.getSurveyApplication();

} 

getSurveyApplication(){
this.surveyLinkService
.getSurveyApplication(this.guid)
.subscribe((surveyApplication: SurveyApplication) => {
  surveyApplication.surveyDto.questions.forEach(element => {
    switch(element.questionType.questionType){
      case "Radiobutton":            
        this.radioButtonList().push(this.newRadiobuttonQuestion(element));
        let radioButtonIndex = (<FormArray>this.radioButtonQuestionForm.get('radioButtonList')).length - 1;
        element.questionAnswers.forEach(item => {
          this.addRadioButtonAnswers(radioButtonIndex, item);
        });
        break;
      default:
        break;
    }
  })
})

} 

radioButtonList(): FormArray {
return this.radioButtonQuestionForm.get("radioButtonList") as FormArray

} 

newRadiobuttonQuestion(element: SurveyQuestion): FormGroup{
return this.formBuilder.group({
  question: element.question,
  answers: this.formBuilder.array([]),
})

} 

addRadioButtonAnswers(radioButtonIndex: number, item: SurveyQuestionAnswer){
let fg = this.formBuilder.group({
  answer: item.answer,
  isChecked: [],
});
(<FormArray>(<FormGroup>(<FormArray>this.radioButtonQuestionForm.controls['radioButtonList'])
        .controls[radioButtonIndex]).controls['answers']).push(fg);

}

...