Кнопки динамического радио 2-сторонняя привязка с использованием ngModel - Angular 6 - PullRequest
Новая
       19

Кнопки динамического радио 2-сторонняя привязка с использованием ngModel - Angular 6

0 голосов
/ 30 августа 2018

Я создаю динамические радиокнопки, которые будут объединены при отправке формы, а не по отдельности. Однако мне нужно привязать их к определенному значению в моем компоненте индивидуально, что я понятия не имею, как это сделать.

Я видел другие похожие посты на эту тему в stackoverflow, но ни одна из них, похоже, не выручала меня.

Вот мой код: 

<input type="radio" class="one" id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" name="{{post.id}}" [value]='candidate.user._id' [(ngModel)]="post.id">
<label for="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date }}">
    <span>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
    </span>
</label>

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 30 августа 2018

Взять новую переменную массива в компоненте: 

private radioButtonValues : Array<any> = [];

затем свяжите это в вас ngModel с индексом i как: 

<input type="radio" class="one" 
       id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" 
       name="{{post.id}}" 
      [value]='candidate.user._id' 
      [(ngModel)]="radioButtonValues[i]">

если вам нужны манипуляции, вы также можете использовать событие ngModelChange для большей функциональности. 

<input type="radio" class="one" 
       id="{{ i }}_{{ candidate.user._id }}_{{post.id}}_{{ candidate.date}}" 
       name="{{post.id}}" 
       [value]='candidate.user._id' 
       [(ngModel)]="radioButtonValues[i]" 
       (ngModelChange)='changeEventInRadioButton($event)'>

затем объявите функцию в классе вашего компонента 

changeEventInRadioButton($event) {
    console.log($event);
}

наконец-то при проверке отправки формы 

onSubmit(){
    console.log(this.radioButtonValues);
}
...