web-dev-qa-db-ja.com

チェックボックスangularマテリアルはデフォルトでチェックされています

Angular Materialチェックボックスを使用して、デフォルトでオンに設定しようとしていますが、チェックなしとして表示されます。何が問題なのですか？

<mat-checkbox class = "example-margin" [(ngModel)] = obj.impresora> 
     <label>Printer</label> 
</mat-checkbox>

obj.impresoraプロパティはブール値です

angularcheckboxangular-materialangular-material2
13
ararb78

NgModelで設定するか、[checked]属性で設定できます。 ngModelバインドプロパティは「true」に設定する必要があります。

1。

  <mat-checkbox class = "example-margin" [(ngModel)] = "myModel"> 
    <label>Printer </label> 
  </mat-checkbox>

2。

<mat-checkbox [checked]= "myModel" class = "example-margin" > 
    <label>Printer </label> 
</mat-checkbox>

3。

<mat-checkbox [ngModel]="myModel" class="example-margin">
    <label>Printer </label> 
</mat-checkbox>

DEMO

23
Vega

これはAngular 7で機能します

// in component.ts
checked: boolean = true;

changeValue(value) {
    this.checked = !value;
}

// in component.html
<mat-checkbox value="checked" (click)="changeValue(checked)" color="primary">
   some Label
</mat-checkbox>

私は誰かを助けてくれることを願っています...ご挨拶。誰かが最も簡単なものを持っているかどうか教えてください

7
Janier Hernandez

選択した答えは機能しますが、htmlタグに「ngModel」があると、チェックボックスがtrueに設定されないというコメントを付けたいと思いました。

これは、checkedプロパティを使用してバインドしようとしているときに発生します。つまり.

<mat-checkbox [checked]='var' ngModel name='some_name'></mat-checkbox>

そして、app.component.tsファイル内

var = true;

動作しないでしょう。

TLDR：[checked]プロパティでチェックを設定している場合、ngModelを削除します

    <mat-checkbox [checked]='var' name='some_name'></mat-checkbox>
2
Josh Dando

あなたがとるアプローチに基づいてこれを達成することができるいくつかの方法があります。リアクティブアプローチの場合、FormControlのコンストラクターにデフォルト値を渡すことができます（@ angular/formsからインポート）

this.randomForm = new FormGroup({
      'amateur': new FormControl(false),
});

Trueまたはfalseの値の代わりに、はいFormControl(this.booleanVariable)のように変数名を送信できます

テンプレート駆動アプローチでは、このように1方向バインディング[ngModel]="this.booleanVariable"または2方向バインディング[(ngModel)]="this.booleanVariable"を使用できます

<mat-checkbox
     name="controlName"
     [(ngModel)]="booleanVariable">
     {{col.title}}
</mat-checkbox>

angularマテリアルが提供するチェックディレクティブを使用して、同様の方法でバインドすることもできます。

1
Rohan Shenoy

Component.ts内でcheckedプロパティがtrueであることを確認する必要があります

export class CheckboxComponent implements OnInit {
 checked = true;
}
0
Sajeetharan

これをHTMLで設定します。

    <div class="modal-body " [formGroup]="Form">
        <div class="">
            <mat-checkbox formControlName="a" [disabled]="true"> Display 1</mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="b"  [disabled]="true">  Display 2 </mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="c"  [disabled]="true">  Display 3 </mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="d"  [disabled]="true">  Display 4</mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="e"  [disabled]="true"> Display 5 </mat-checkbox>
        </div>
    </div>

Tsファイルの変更

this.Form = this.formBuilder.group({
a: false,
b: false,
c: false,
d: false,
e: false,
});

Urビジネスロジックの条件検証

if(true){
this.Form.patch(a: true);
}
0
Thulasiram Virupakshi

NgModelで確認するには、「ngModel」と「value」をマージします。例：

 <mat-checkbox [(ngModel)]="myVariable"  value="1" >Subscribe</mat-checkbox>

ここで、myVariable = 1

挨拶

0
Angel Hernandez

コンポーネントに次のコードがあることを確認してください。

export class Component {
  checked = true;
}
0
Arampg

リアクティブフォームを使用している場合は、次のようにデフォルトに設定できます。

フォームモデルで、値をfalseに設定します。そのため、チェックされている場合、その値はtrueになり、そうでない場合はfalse

let form = this.formBuilder.group({
    is_known: [false]
})

// HTMLで

 <mat-checkbox matInput formControlName="is_known">Known</mat-checkbox>
0
Shashank Gaurav