typescript - Angular 4 zmena hodnoty začiarkavacieho políčka

Ako by ste mohli dosiahnuť v Angular 4, že keď sa zaregistrujete v zaškrtávacom políčku, uloží sa hodnota „A“ alebo „B“. Koľko sa snažím, posiela mi len true alebo false, dúfam, že mi niekto môže pomôcť.

registry.component.ts

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

registry.component.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>

Takto môžem spôsobiť, že konzola ukáže hodnotu, ktorú chcem (A alebo B), ale v JSON je stále true alebo false.

Odpoveď č. 1

To je to, čo hľadáte:

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

Vo vašej triede:

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

Zahrňte tiež FormsModule do app.module.ts, aby ngModel fungoval!

Dúfam, že to pomôže!

Odpoveď č. 2

Skús to.

Šablóna

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

Ts súbor

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

Odpoveď č. 3

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

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

Odpoveď č. 4

Môžeme urobiť nasledovné. Používam Angular 12.

[Html]

<input type="checkbox" formControlName="lock" (change)="changeStatus($event)" />

[TS]

changeStatus(event:Event){
    const isChecked = (<HTMLInputElement>event.target).checked;
    console.log(isChecked)
}

Odpoveď č. 5

Tipujem, že toto je niečo, čo sa snažíte dosiahnuť.

<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);
}

Súvisiace články