Angular 4复选框更改值

Question

您如何在 Angular 4 中实现，当您在复选框中注册时保存“A”或“B”值。尽我所能，他只是发给我真假，我希望有人能帮助我。

注册表.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。

原文由 J. Edu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这就是您要查找的内容：

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

在你的班级里面：

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

还要在 app.module.ts 中包含 FormsModule 以使 ngModel 工作！

希望能帮助到你！

原文由 SHOHIL SETHIA 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

例如，您可以使用表单控制器 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>

原文由 Eyayu Tefera 发布，翻译遵循 CC BY-SA 4.0 许可协议