Angular 4 확인란 값 변경

Angular 4 확인란 값 변경

확인란에 등록할 때 "A" 또는 "B" 값을 저장하는 Angular 4에서 어떻게 달성할 수 있습니까?내가 노력하는 만큼, 그는 나에게 진실이든 거짓이든 보내고 있어, 나는 누군가가 나를 도와줄 수 있기를 바랍니다.

registry.component.ts

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

registry.component.vmdk

<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은 여전히 참이거나 거짓입니다.

이것이 바로 당신이 찾고 있는 것입니다.

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

클래스 내부:

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

양식 모듈도 포함app.module.tsngModel을 작동시킵니다!

도움이 되길 바랍니다!

이거 한번 해봐요.

템플릿

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

Ts 파일

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

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

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

우리는 아래와 같이 할 수 있습니다.나는 각진 12를 사용하고 있습니다.

[Html]

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

[TS]

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

저는 이것이 당신이 성취하고자 하는 것이라고 추측합니다.

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

또 다른 접근 방식은ngModelChange:

템플릿:

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

컨트롤러:

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

저는 이 방법을 선호합니다. 왜냐하면 여기서 당신은 관련된 목적과true/false확인란의 값을 입력합니다.

이것은 나에게 효과가 있습니다, 각도 9:

component.vmdk 파일:

<mat-checkbox (change)="checkValue($event)">text</mat-checkbox>

component.ts 파일:

checkValue(e){console.log(e.target.checked);}

다음을 사용할 수 있습니다.

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

    });
}

여기서 레코드는 현재 행의 모델이고 상태는 부울 값입니다.

이것이 나에게 효과가 있었던 것을 시도해 보세요:

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

구성 요소 클래스 내부:

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

이제 컨트롤에 A 또는 B 값이 표시됩니다.

양식 컨트롤러 valueChanges() 수신기를 사용하고 이벤트를 구독할 수 있습니다(예:

컨트롤러 또는 .ts 파일

constructor(private _formBuilder: FormBuilder) { }

  ngOnInit(): void {
            this.yourForm = this.createFrom();
            this.listenForCheckboxChanges();
           
  }

  private createFrom() {
     return this._formBuilder.group(
          {
            CheckBox:[false],
    
          })
  }

  get yourCheckbox(){
    return this.conservationForm.controls['CheckBox'];
  }

  listenForCheckboxChanges() {
    this.yourCheckbox.valueChanges.subscribe(res=>{
      //console vaule of checkbox
      console.log(res)
    });
  }

사용자 보기 또는 .htm 파일에서

<div  [formGroup]="yourForm" fxLayoutGap="12px">
  <mat-checkbox  formControlName="CheckBox">Checkbox!</mat-checkbox>
</div>

언급URL : https://stackoverflow.com/questions/47068222/angular-4-checkbox-change-value