web-dev-qa-db-ja.com

ngForでマットラジオボタンを使用してReactiveFormsを操作する

angular looを使用しているときにリアクティブフォームのマテリアルからラジオボタンを使用しようとしましたが、成功しませんでした。htmlネイティブラジオボタンを正常に使用しましたが、mat-radio-buttonsに変更すると、 「2番目の」コントロールの値を選択すると、最初のコントロールにも同じ値が設定されます。

私はここで何が間違っているのですか？以下のデモ

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

angularangular-material2angular-reactive-formsngfor
4
tiagomagalhaes

メソッドsetAnswer(answer : any)の値を特定のコントロールに割り当てるため、フォームコントロールをmat-radio-groupから削除します。グループに、コントロールを割り当てる必要はありません。

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

これに変更

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

改訂

フォームコントロールをmat-radio-buttonにバインドしようとすると、次のエラーが発生します。

エラーエラー：名前が「func」のフォームコントロールの値アクセサーがありません

これは、mat-radio-buttonにControlValueAccessordirectiveがなく、ネイティブラジオボタンの使用に成功したためです。

フォーム制御ディレクティブは、ControlValueAccessorディレクティブを使用してネイティブ要素と通信します。可能な入力ごとに、さまざまなタイプのControlValueAccessorsがあります。正しいものは、valueaccessorディレクティブのセレクターによって選択されます。セレクターは、<input>のタイプに基づいています。 type = "radio"がある場合、ラジオの値アクセサーが使用されます。

この回答からの説明

Angular2 Reactive Forms formControl for radio button

このシナリオでは、メソッドを使用してコントロールに値を設定するのが正しいアプローチです...このメソッドを使用してformControlに値を設定したくない場合は、ネイティブのhtmlボタンを使用する必要があります。前。

リビジョン2

リンクされたSO質問の最後の回答をさらに読むと、ネイティブHTMLボタンを使用せずにこれを行う方法があるようです。

  • ここで重要なのは、ctrlsを繰り返し処理し、それぞれにmat-radio-groupを作成することです。
  • 次に、* ngIfを使用してindexをcurrentQuestionと比較し、currentQuestionに基づいて正しいグループのみを表示する必要があります。

以下のHTMLを参照してください。

<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}}</pre>

</mat-card>
3
Marshal