Как динамически установить текст переключателя с помощью формы Reactive? и и выбрал * значение радиокнопки и заголовок вопроса * onSubmit

Question

Я добавил список вопросов (2) и список вариантов (3 или 4) динамически, используя реактивный массив форм.

вопрос 1 ) Как установить переключатель текст динамически с использованием массива форм?

вопрос 2) и теперь я пытаюсь получить только выбранный идентификатор выбора относительно вопросаИдентификатор onSubmit метод.Как я могу это сделать?

Я попробовал код, вставленный ниже, пожалуйста, помогите мне.

export class HomeComponent implements OnInit {
  survey: FormGroup;
  user: User[] = [
    {
      id: 1,
      question: 'Question 1',
      choice: [
        {
          ChoceId: 1,
          Value: '1choice 1'
        },
        {
          ChoceId: 2,
          Value: '1choice 2'
        },
        {
          ChoceId: 3,
          Value: '1choice 3'
        },
        {
          ChoceId: 4,
          Value: '1choice 4'
        }

      ]
    }, {
      id: 2,
      question: 'Question 2',
      choice: [
        {
          ChoceId: 1,
          Value: '2choice 1'
        },
        {
          ChoceId: 2,
          Value: '2choice 2'
        },
        {
          ChoceId: 3,
          Value: '2choice 3'
        }
      ]
    }, {
      id: 3,
      question: 'Question 3',
      choice: [
        {
          ChoceId: 1,
          Value: '3choice 1'
        },
        {
          ChoceId: 2,
          Value: '3choice 2'
        },
        {
          ChoceId: 3,
          Value: '3choice 3'
        }
      ]
    }
    , {
      id: 4,
      question: 'Question 4',
      choice: [
        {
          ChoceId: 1,
          Value: '4choice 1'
        },
        {
          ChoceId: 2,
          Value: '4choice 2'
        },
        {
          ChoceId: 3,
          Value: '4choice 3'
        },
        {
          ChoceId: 4,
          Value: '4choice 4'
        }
      ]
    }
    , {
      id: 5,
      question: 'Question 5',
      choice: [
        {
          ChoceId: 1,
          Value: '5choice 1'
        },
        {
          ChoceId: 2,
          Value: '5choice 2'
        },
        {
          ChoceId: 3,
          Value: '5choice 3'
        },
        {
          ChoceId: 4,
          Value: '5choice 4'
        }
      ]
    },
    {
      id: 6,
      question: 'Question 6',
      choice: [
        {
          ChoceId: 1,
          Value: '6choice 1'
        },
        {
          ChoceId: 2,
          Value: '6choice 2'
        },
        {
          ChoceId: 3,
          Value: '6choice 3'
        },
        {
          ChoceId: 4,
          Value: '6choice 4'
        }
      ]
    },
    {
      id: 7,
      question: 'Question 7',
      choice: [
        {
          ChoceId: 1,
          Value: '7choice 1'
        },
        {
          ChoceId: 2,
          Value: '7choice 2'
        },
        {
          ChoceId: 3,
          Value: '7choice 3'
        },
        {
          ChoceId: 4,
          Value: '7choice 4'
        }
        ,
        {
          ChoceId: 5,
          Value: '7choice 4'
        }
      ]
    }
  ]

  constructor() {

  }

  ngOnInit() {


    this.survey = new FormGroup({
      sections: new FormArray([
        this.initSection(),
      ]),
    });

    for (let i = 0; i < this.user.length; i++) {

      this.addQuestion(0, this.user[i].question)
        this.add(0, i+1,this.user[i].choice);
        this.removeOption(0, i, 0)  
       }
    this.removeQuestion(0);
  }

  initSection() {
    return new FormGroup({
      questions: new FormArray([
        this.initQuestion('questionTitle')
      ])
    });
  }

  initQuestion(val: string) {
    return new FormGroup({
      questionTitle: new FormControl(val),
      options: new FormArray([
        this.initOptions('')
      ])
    });
  }

  initOptions(val: string) {
    return new FormGroup({
      optionTitle: new FormControl(val)
    });
  }

  addSection() {
    const control = <FormArray>this.survey.get('sections');
    control.push(this.initSection());
  }

  addQuestion(j, val: string) {
    console.log(j);
    const control = <FormArray>this.survey.get('sections').controls[j].get('questions');
    control.push(this.initQuestion(val));

  }

  add(i, j, choice: Choices[]) {

    const control = <FormArray>this.survey.get('sections').controls[i].get('questions').controls[j].get('options');
    if (choice) {
       for (j = i; j < choice.length; j++) {
        control.push(this.initOptions(choice[j] .Value));
      }
    }else{
      control.push(this.initOptions(''));
    }
  }

  getSections(form) {
    //console.log(form.get('sections').controls);
    return form.controls.sections.controls;
  }
  getQuestions(form) {
    //console.log(form.controls.questions.controls);
    return form.controls.questions.controls;
  }
  getOptions(form) {
    //console.log(form.get('options').controls);
    return form.controls.options.controls;

  }

  removeQuestion(j) {
    const control = <FormArray>this.survey.get('sections').controls[j].get('questions');
    control.removeAt(j);
  }

  removeSection(i) {
    const control = <FormArray>this.survey.get('sections');
    control.removeAt(i);

  }

  removeOption(i, j, k) {
    // debugger;
    console.log(i, j, k);
    const control = <FormArray>this.survey.get(['sections', i, 'questions', j, 'options']); // also try this new syntax
    control.removeAt(k);
  }

  remove(i, j) {
    const control = <FormArray>this.survey.get(['sections', i, 'questions', j, 'options']);
    control.removeAt(0);
    control.controls = [];
  }

  onSubmit(form:NgForm) {
    debugger;

    console.log(this.survey.value.optionTitle);
    console.log(form);

  }

}

вот HTML-код, который я пробовал

    <!---Survey Section -->
    
      
        
          User likes and choices
          <!-- <input type="text" placeholder="Untitled form" formControlName="sectionTitle">
           -->
          <!-- Question segment -->
          <!---Survey Section -->
          
          
            
              
              <!-- <select formControlName="questionType">  
                          
                            Check Boxes
                            Free Text
                            Rating
                            Date
                            Time
                         -->

    
            {{ survey.errors }}
          
             
              Add_Option||
              Remove_whole_options
            
              <!-- Option Addation -->
              
                

                   
                  


                  <!-- <a (click)="remove(i,j)">Option -->
                   1" (click)="removeOption(i,j,k)">Remove_Option
                
                <!-- End Option Addition -->
                <!-- Option Addtion -->
                <!-- End Option Addition -->

              

              
              
              Add Question...
               1" (click)="removeQuestion(i)">Remove Question
            
            

          
          <!-- End Question -->

        
        

        Add Section 
         1" (click)="removeSection(i)">Remove Section
      
    
    <!-- End Section -->
    Get-Link
  

 {{survey.value | json}} 

Вот мой вывод:

Answer 1

Если я правильно понял ваш вопрос.Чтобы динамически заполнить значения переключателя, используйте приведенный ниже код.

      dataSource = User[]; // you have to create a user class
      ngonInit() {
         this.populateUsers();
      }
        populateUsers() {
        this.dataSource = [];
        this.userService.getUserData().subscribe( resp => {
        resp.forEach(element => {
          console.log(element);
        const config = new  User(element.choiceId, element.Value); // User class have 
             constructor taking these values
          this.dataSource.push(config);
      });
     }

Ниже приведен пример выпадающего списка, здесь можно сделать что-то похожее для переключателя

 <select  formControlName= "user"  class="form-control" 
                           (change)="selectUserOption($event.target.value);">
                             <option  [value]="d.value" *ngFor="let d of dataSource">
                                      {{d.ChoiceId}}
                                </option>
                          </select>

.является событием (изменения) для раскрывающегося списка, а затем вы можете прочитать значение выбранной кнопки.