アンギュラマテリアル<mat-button-toggle>を使用してモデルにバインドする方法は？

Question

このPlunkerを見てみましょう： https://plnkr.co/edit/yu95hUrKlUh4Ttc5SwYD?p=preview

私は<mat-slide-toggle>を使用していたとき、私は私のコンポーネントの値を変更することができる午前：予想通り

<mat-slide-toggle [(ngModel)]="myFlagForSlideToggle">Toggle me!</mat-slide-toggle> 

myFlagForSlideToggleが更新されます。

しかし、<mat-button-toggle>を使用している場合、値は更新されません。私はngDefaultControlを追加してこの例を動作させる必要がありましたが、どのように重要かは分かりません。

<mat-button-toggle [(ngModel)]="myFlagForButtonToggle" ngDefaultControl>Toggle me!</mat-button-toggle> 

ボタンの状態をコンポーネントにバインドする正しい方法は何ですか？

Answer 1

MatButtonToggleコンポーネントにはControlValueAccessorが実装されていないため、ngModelを使用することはできません。 はother purposesに導入されました。

MatButtonToggleは、mat-button-toggle-groupの一部とする。しかし、あなたはここでそれをスタンドアロン・コンポーネントとバインドモデルとしてそれを使用したい場合は、あなたがそれを行うことができる方法のいくつかの例です：

<mat-button-toggle 
    [checked]="myFlagForButtonToggle" 
    (change)="myFlagForButtonToggle = $event.source.checked"> 
    Toggle me! 
</mat-button-toggle> 

Plunker Example

Answer 2

mat-button-toggleブール値を持っているといけません[(ngModel)]は動作しませんdoc

これらのトグルは、ラジオボタンまたはチェックボックスとして動作するように設定できます。

ユースケースは、この

<mat-button-toggle-group [(ngModel)]="myFlagForButtonToggle"> 
    <mat-button-toggle value="button1" ngDefaultControl>Toggle me!</mat-button-toggle> 
    <mat-button-toggle value="button2" ngDefaultControl>Toggle me!</mat-button-toggle> 
    <mat-button-toggle value="button3" ngDefaultControl>Toggle me!</mat-button-toggle> 
</mat-button-toggle-group> 

等であってもよいし、myFlagForButtonToggle :string;

に自分のブール値を変更します