Создание радиогруппы в объекте json с Angular - PullRequest
Новая
       6

Создание радиогруппы в объекте json с Angular

0 голосов
/ 30 октября 2018

Мне нужно динамическое количество переключателей на основе имени радио для создания объекта например, я ожидаю вывод что-то вроде этого

Ожидаемый результат 

[
 {Q1: '1'},
 {Q2: '3'} 
];

Я пытался с помощью [(ngModel)]

Но когда я нажимаю на любую радиостанцию, всегда выбирается последняя, ​​и значение никогда не присваивается ngModel.

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

app.component.html 

<div *ngFor="let question of questions">
<ul>
    <li>
      <span>{{question.id}}.{{question.name}}</span>
      <div *ngFor="let radio of radioGroup">
         <input id="{{question.radioName}}" 
                class="radio-button" 
                [value]='radio.id' 
                type="radio" 
                name="radio"/>
          <div class="radio-tile">
             <label for="{{question.radioName}}" 
                    class="radio-tile-label">
                      {{radio.name}}
             </label>
           </div>
         </div>
        </li>
      </ul>
   </div>

app.component.ts 

export class AppComponent {

 questions;
 radioGroup;

 ngOnInit() {
  this.questions =[
   {
    id: '1', 
    name: 'What is your name?', 
    radioName: 'Q1',
    modelName: 'question1'
  },
  { 
    id: '2', 
    name: 'What is your role in your organization?',  
    radioName: 'Q2',
    modelName: 'question2' 
  }
 ];


 this.radioGroup = [
   {id: '1', name: 'Strongly Disagree'},
   {id: '2', name: 'Disagree'},
   {id: '3', name: 'Neutral'},
   {id: '4', name: 'Agree'},
   {id: '5', name: 'Strongly Agree'},
  ];
 }
}

1 Ответ

0 голосов
/ 30 октября 2018

Один из способов (без минимальных изменений в вашем коде) - с событием change, как показано ниже.

Лучше было бы взглянуть на угловатые реактивные формы.

Сделайте заметку:

  • в шаблоне - (change)="selected(question.radioName, radio.id)"
  • в коде - selected(qName, reqId) { this.answers[qName] = reqId; }
Событие

change сработает на измененном радио, где вы можете обновить модель с помощью метода selected.

Затем добавьте «Подтвердить» и, если необходимо, enabled/disabled, проверка должна быть прямой, оценив поле answers. 

<div *ngFor="let question of questions">
  <ul>
    <li>
      <span>{{question.id}}.{{question.name}}</span>
      <div *ngFor="let radio of radioGroup">
        <input id="{{question.radioName}}"
               class="radio-button"
               [value]='radio.id'
               type="radio"
               name="radio" (change)="selected(question.radioName, radio.id)"/>
        <div class="radio-tile">
          <label for="{{question.radioName}}"
                 class="radio-tile-label">
            {{radio.name}}
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>
<div>{{ answers | json }}</div>


export class AppComponent implements OnInit {

  questions;
  radioGroup;

  answers = {};

  ngOnInit() {
    this.questions = [
      {
        id: '1',
        name: 'What is your name?',
        radioName: 'Q1',
        modelName: 'question1'
      },
      {
        id: '2',
        name: 'What is your role in your organization?',
        radioName: 'Q2',
        modelName: 'question2'
      }
    ];


    this.radioGroup = [
      {id: '1', name: 'Strongly Disagree'},
      {id: '2', name: 'Disagree'},
      {id: '3', name: 'Neutral'},
      {id: '4', name: 'Agree'},
      {id: '5', name: 'Strongly Agree'},
    ];
  }

  selected(qName, reqId) {
    this.answers[qName] = reqId;
  }
}
...