Modification de la valeur d'une case à cocher en Angular 4

Question

comment réaliser en Angular 4 que lors de l'enregistrement dans une case à cocher enregistrer une valeur "A" ou "B". J'ai beau essayer, il ne m'envoie que du vrai ou du faux, j'espère que quelqu'un pourra m'aider.

composant.d'enregistrement.ts

  this.userForm = new FormGroup({
   state: new FormControl('',),

  });

composant.d'enregistrement.html

<div class="form-group">
                <label>State</label>
          <input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" formControlName="state"/>
        </div>  

            <pre>{{userForm.value | json}}</pre>

De cette façon, je peux faire en sorte que la console affiche la valeur que je veux (A ou B) mais dans le JSON, c'est toujours vrai ou faux.

Answer 1

C'est ce que vous recherchez :

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />

Dans votre classe :

checkValue(event: any){
   console.log(event);
}

Incluez également le FormsModule dans app.module.ts pour faire fonctionner le ngModel !

J'espère que cela vous aidera !

Answer 2

Faites un essai,

Modèle

<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>

Fichier Ts

FieldsChange(values:any){
console.log(values.currentTarget.checked);
}

Answer 3

changed = (evt) => {    
this.isChecked = evt.target.checked;
}

<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>

Answer 4

Je suppose que c'est ce que vous essayez d'obtenir.

<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B

click(ev){
   console.log(ev.target.defaultValue);
}

Answer 5

Une autre approche consiste à utiliser ngModelChange :

Modèle :

<input type="checkbox" ngModel (ngModelChange)="onChecked(obj, $event)" />

Contrôleur :

onChecked(obj: any, isChecked: boolean){
  console.log(obj, isChecked); // {}, true || false
}

Je préfère cette méthode parce qu'ici vous obtenez l'objet pertinent et true / false les valeurs d'une case à cocher.