Как правильно установить переключатель * l oop в angular? - PullRequest
Новая
       26

Как правильно установить переключатель * l oop в angular?

0 голосов
/ 12 февраля 2020

Я получаю API анкеты, который содержит массив вопросов, и внутри каждого вопроса у меня есть выбор. Вот пример json: 

{ questions: 
       [ 
          {
             question: "", 
             choices: 
                [ 
                   { 
                      choice: "A", 
                      selected: false 
                    } 
                 ] 
           } 
       ]
}

. Для этого примера я использую ReactiveForms.

Ниже приведена базовая c структура того, как я построил FormGroup. Это будет заполнено в зависимости от того, сколько данных я получаю от API. 

this.questionnaire = this.formbuilder.group({
     question: this.formbuilder.array([
        this.formbuilder.group({
           question: "data_from_api"
           choices: this.formbuilder.array([
              this.formbuilder.group({
                 choice: "data_from_api",
                 selected: false
              })
           ])
        })
     ])
});

Мои логики c к этому, это l oop контроль каждого вопроса, затем l oop каждый контроль выбора внутри вопрос. Проблема, с которой я сталкиваюсь, заключается в том, что когда я oop массив элементов управления выбором, переключатели не группируются, поэтому он позволяет пользователю выбирать все варианты внутри вопроса.

Вот как у меня HTML. 

<form [formGroup]="questionnaire">
  <div formArrayName="questions">
    <div *ngFor="let question of questionnaire.get('questions').controls; let i = index" [formGroup]="question">
      {{ question.get('question').value }}
      <div formArrayName="choices">
        <div *ngFor="let choice of questions.get('choices').controls; let j = index" [formGroup]="choice">
         <label>
           <input formControlName="selected" type="radio" [value]="true || false">
           {{ choice.get('choice').value }}
         </label>
        </div>
      </div>
    </div>
  </div>
</form>

Если выбрана радиокнопка (выбор), то formControlName = "selected" сохранит как true. Я могу отображать без проблем, он работает найти, когда я использую его с флажками.

Я попытался добавить атрибут «имя», но не работает, так как вы можете иметь только «formControlName» и «имя» с то же значение, которое в данном случае вам не нужно, потому что оно сгруппирует все существующие переключатели.

Если я не могу изменить json, как я могу решить эту проблему? Можете ли вы порекомендовать мне некоторые варианты или ссылки на аналогичный пример. Заранее спасибо!

1 Ответ

1 голос
/ 12 февраля 2020

Если я правильно понимаю, вам нужно будет использовать i и объединить его с произвольным именем для вашего выбора, скажем, <input formControlName="selected" [attr.name]="'choice-group-' + i" type="radio" [value]="true || false">, что создаст изолированные группы для вопроса.

...