Имейте мат-радио-кнопку в ng для работы с Reactive Forms - PullRequest
Новая
       23

Имейте мат-радио-кнопку в ng для работы с Reactive Forms

0 голосов
/ 27 ноября 2018

Я пытался использовать радиокнопки из углового материала с реактивными формами при использовании туалета, но безуспешно.Я успешно использовал собственные радио-кнопки html, но когда я переключаюсь на mat-radio-button, при выборе значения для «второго» элемента управления оно установит то же значение для первого.

Что я делаю неправильноВот?Демоверсия ниже

https://stackblitz.com/edit/angular-68mtq8

1 Ответ

0 голосов
/ 27 ноября 2018

Удалите элемент управления формы из mat-radio-group, поскольку вы присваиваете значение в методе setAnswer(answer : any) конкретному элементу управления, назначать элемент управления группе не обязательно. 

<mat-radio-group class="example-radio-group" [formControlName]="ctrls[currentQuestion]">

изменить наthis 

<mat-radio-group class="example-radio-group">

Revision

Попытка привязать элемент управления формы к mat-radio-button приводит к следующей ошибке.

ERRORОшибка: Нет доступа к значению для элемента управления формы с именем: 'func'

Причина этого в том, что mat-radio-button не имеет директивы ControlValueAccessor, и именно поэтому вы успешно использовали встроенные переключатели.

Директивы управления формой используют директиву ControlValueAccessor для связи с собственным элементом.Существуют разные типы ControlValueAccessors для каждого из возможных входов.Правильный выбирается селектором директивы accessor значения.Селекторы основаны на типе <input>.Если у вас type = "radio", то будет использоваться средство доступа к значению для радио.

Объяснение из этого ответа

Angular2 Reactive Forms formControl для переключателей

В этом сценарии использование метода для установки значения в элементе управления будет правильным подходом ... если вы не хотите использовать метод для установки значения в formControl, вам необходимоиспользуйте собственные кнопки HTML, как вы делали раньше.

Редакция 2

Считывание последнего ответа на этот связанный вопрос SO далее, кажется, есть способ сделать это без использованиянативные кнопки HTML.

  • Ключ здесь заключается в том, чтобы перебрать ваш ctrls и создать mat-radio-group для каждого.
  • Затем вы должны использовать * ngIf для сравненияindex до currentQuestion, чтобы вы отображали только правильную группу на основе currentQuestion

. См. HTML ниже. 

<code><mat-card>
    <div id="questions-container">
        <div class="arrows" (click)="previousQuestion()">
            <div>
                <</div>
            </div>
            <div class="question-container">
                <form [formGroup]="form">

                    <h1>Question placeholder?</h1>
                    <div *ngFor="let ctrl of ctrls; let i = index">
                        <mat-radio-group *ngIf="currentQuestion == i" class="example-radio-group" [formControlName]="ctrl">
                            <mat-radio-button *ngFor="let answer of answers[currentQuestion]" [value]="answer.id">{{answer.label}}</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </form>
            </div>
            <div class="arrows" (click)="nextQuestion()">
                <div>></div>
            </div>

        </div>
        <p>{{currentQuestion}}</p>
        <p>{{ctrls[currentQuestion]}}</p>
        <pre>{{form.value | json}}
...