1
votes

Inverser la valeur "cochée" d'une case à cocher mat

Quand un matériau angulaire mat-checkbox ( https: // material.angular.io/components/checkbox/overview ) est coché, il a la valeur "true". Lorsqu'elle n'est pas cochée, la valeur est "false".

Y a-t-il un moyen de renverser ce comportement? J'ai juste besoin du contraire. Une case cochée doit être sérialisée sur "false" et une case non cochée doit être sérialisée sur "true" lors de l'appel de this.filterFormGroup.getRawValue().

J'espérais qu'il y a quelque chose comme ceci:

    this.filterGroup = new FormGroup({
        resolved: new FormControl(),
    });

    this.filterGroup.getRawValue();

Ou dois-je créer une directive personnalisée comme ceci:

<mat-inverted-checkbox></mat-inverted-checkbox>

Mon objectif est que ceci code:

<mat-checkbox [myCustomCheckedValue]="false" [myCustomUnCheckedValue]="true"></mat-checkbox>

renvoie {olved: false} lorsque la case est cochée.

angular angular-material2 angular7 angular-material-7

0 commentaires

4 Réponses :

-1
votes

Vous pouvez écrire un Pipe personnalisé pour modifier les valeurs reçues comme vous le souhaitez. Comme si la valeur reçue est vraie, elle convertira la valeur de la manière souhaitée qui est fausse dans votre cas.

4 commentaires

Je ne sais pas où vous pensez que le tuyau pourrait être inséré. Pouvez-vous ajouter un extrait de votre solution?

J'ai utilisé un test de variable qui est initialisé avec true et j'utilise le tube inversé pour transformer la valeur en false

faites-moi savoir au cas où cela aiderait @ tobias47n9e

@VaibhavKaushik, il vaut mieux écrire le code dans la réponse et ne pas mettre de lien dans stackblitz (ou mettre le lien dans la réponse). Ce stackblitz peut "disparaître" ou changer et la réponse laissée incomplète

3
votes

Tobias, un formControl existe même si vous n'avez pas d'entrée. Donc, si vous avez

<mat-checkbox [checked]="!mycontrol.value"
              (change)="mycontrol.setValue(!$event.checked)">
   Check me!
</mat-checkbox>

, vous pouvez utiliser quelque chose comme:

mycontrol=new FormControl()

voir dans stackblitz

Remarque, si vous n'avez qu'un formControl unique, alors:

<mat-checkbox [checked]="!form.value.resolved"
              (change)="form.get('resolved').setValue(!$event.checked)">
   Check me!
</mat-checkbox>

que vous utilisez

  form = new FormGroup({
    resolved: new FormControl()
  })

1 commentaires

Vous n'avez pas besoin de lier [coché] (sauf si vous voulez que l'état initial soit coché), mais vous devez définir la valeur initiale true / non cochée sur le FormControl .

2
votes

Au cas où quelqu'un voudrait faire cela sans FormControl, la solution la plus simple est de lier l'entrée value à la propriété checked :

<mat-checkbox #checkbox [value]="!checkbox.checked">
  {{ checkbox.value }}
</mat-checkbox>

0 commentaires

0
votes

J'ai utilisé la réponse de https://stackoverflow.com/users/8558186/eliseo et l'ai rendue "fausse "ou" null "pour l'API:

this.resolvedFormControl = new FormControl(null);
this.resolvedFormControl.setValue(false.toString());

this.filterGroup = new FormGroup({
    resolved: this.resolvedFormControl,
});

this.filterGroup.valueChanges.subscribe(() => {
    console.log(this.filterGroup.getRawValue());
    // resolved is either 'false' or null
}

et dans le composant:

<mat-checkbox (change)="resolvedFormControl.setValue($event.checked ? false.toString() : null)"
    [checked]="resolvedFormControl.value === false.toString()">
            Resolved
</mat-checkbox>

0 commentaires