1
votes

Comment verrouiller un bouton à l'aide d'une case à cocher?

J'ai une case à cocher qui devrait être initialement inactive. Et il y a aussi un bouton qui devrait être inactif. Si la case à cocher devient active, alors le bouton également. Et vice versa.

ts:

<mat-checkbox color="primary" (change)="changeEvent($event)">
    Disabled
</mat-checkbox>

<button mat-button color="primary" [disabled]="!disabled">Click</button>

html:

  disabled: boolean = false;

  changeEvent(event) {
    if (event.target.checked) {
      this.disabled = true;
    }
    else {
      this.disabled = false;
    }
  }

angular angular-material

0 commentaires

5 Réponses :

0
votes

Lorsque vous utilisez l'attribut désactivé, vous devez fournir la valeur littérale ou omettre l'attribut. Pouvez-vous essayer:

<button mat-button color="primary" [disabled]="disabled ? 'disabled' : null">Click</button>

0 commentaires

0
votes

Votre logique devrait fonctionner (comme le montre ce rapide Stackblitz a > Je l'ai fait):

<input type="checkbox" (change)="change($event)">Disabled
<button [disabled]="!disabled">Click</button>

component.html : p >

disabled = false;

change(event) {
  this.disabled = event.target.checked;
}

Il vous manque des importations de matériau angulaire ou des éléments contenant?

0 commentaires

6
votes

Vous pouvez vous référer à la case à cocher elle-même à la place en utilisant une variable de composant

<mat-checkbox #disabler color="primary">
    Disabled
</mat-checkbox>

<button mat-button color="primary" [disabled]="disabler.checked">
  Click
</button>

0 commentaires

0
votes

pourquoi n'utilisez-vous pas [(ngModel)]?

<mat-checkbox[(ngModel)]="disabled">Disabled</mat-checkbox>
<button [disabled]="disabled?true:null">Click</button>

//in your .ts
disabled: boolean = true;

2 commentaires

Et s'il utilise des formes réactives?

[disabled] = "myForm.get ('mycontrol'). value? true: null" J'utilise uniquement .value, pas myForm.get ('mycontrol'). value == true car au cas où des chèques est le même

1
votes

Supprimer la cible à l'intérieur de la condition.

disabled: boolean = false;

  changeEvent(event) {
    if (event.checked) {
      this.disabled = true;
    }
    else {
      this.disabled = false;
    }
  }

1 commentaires

Vous pouvez raccourcir cela en disant this.disabled = event.checked