web-dev-qa-db-ja.com

Angular 4チェックボックスの値の変更

チェックボックスに登録するときに「A」または「B」の値を保存するAngular 4でどのように達成できますか。私が試みる限り、彼は私に真か偽かを送っているだけです。誰かが私を助けてくれることを願っています。

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>

そうすれば、コンソールに必要な値（AまたはB）を表示することができますが、JSONではまだtrueまたはfalseです。

angularresttypescript
28
J. Edu

これはあなたが探しているものです：

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

クラス内：

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

ngModelを機能させるためにapp.module.tsにFormsModuleも含めてください！

それが役に立てば幸い！

52
SHOHIL SETHIA

これを試してみて、

テンプレート

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

Tsファイル

FieldsChange(values:any){
console.log(values.currentTarget.checked);
}
29
balajivaishnav
changed = (evt) => {    
this.isChecked = evt.target.checked;
}

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

別のアプローチは、ngModelChangeを使用することです。

テンプレート：

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

コントローラ：

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

ここでは、関連するオブジェクトとチェックボックスのtrue/false値を取得するため、この方法を好みます。

4
Axel186

これがあなたが達成しようとしているものだと思います。

<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);
}
4
AddWeb Solution Pvt Ltd

これを使用できます：

<input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">

そして、tsファイルで、

changeStatus(id, e) {
    var status = e.target.checked;
    this.yourseverice.changeStatus(id, status).subscribe(result => {
        if (status)
            this.notify.success(this.l('AddedAsKeyPeople'));
        else
            this.notify.success(this.l('RemovedFromKeyPeople'));

    });
}

ここで、レコードは現在の行のモデルであり、ステータスはブール値です。

2
Abdus Salam Azad

コンポーネントクラス内：

checkValue(event: any) {
  this.userForm.patchValue({
    state: event
  })
}

コントロールには、値AまたはBがあります

0
Chetan Upreti
<input type="checkbox" value="a" (click)="clicked('A')">A
<input type="checkbox" value="b" (click)="clicked('B')">B

clicked(val){
   console.log(val);
}

そのようなものが欲しいですか？

0
Imdad Ali

これが私のために働いてみてください：

checkValue(event: any) {
    this.siteSelected.majeur = event;
}
0
Azhar Elhar