web-dev-qa-db-fra.com

Case à cocher Matériau angulaire coché par défaut

J'essaie d'utiliser la case à cocher angulaire matérielle et de la définir par défaut comme cochée, mais elle s'affiche non cochée, qu'est-ce qui ne va pas?

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

la propriété obj.impresora est booléenne

angularcheckboxangular-material
5
ararb78

Vous pouvez soit définir avec ngModel soit avec l'attribut [vérifié]. La propriété liée ngModel doit être définie sur '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

11
Vega

La réponse choisie fonctionne, mais je voulais faire un commentaire indiquant qu'avoir 'ngModel' sur la balise html empêchait la case à cocher d'être cochée. 

Cela se produit lorsque vous essayez de faire une liaison en utilisant la propriété cochée. c'est à dire. 

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

Et ensuite dans votre fichier app.component.ts

var = true;

ne fonctionnera pas.

TLDR: Supprimez ngModel si vous définissez le vérifié par la propriété [selected]

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

Vous devez vous assurer que la propriétécheckedest vraie à l'intérieur du composant.ts

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

Définissez ceci en 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>

Changements dans le fichier Ts

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

Validation de condition dans la logique de votre entreprise

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

cela fonctionne pour moi dans 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>

J'espère aider quelqu'un ... salutations ... me dire si quelqu'un a plus facile

0
Janier Hernandez

Si vous utilisez un formulaire réactif, vous pouvez le définir par défaut comme suit:

Dans le modèle de formulaire, définissez la valeur sur false. Donc, si elle est cochée, sa valeur sera true, sinon false 

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

// en HTML

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