css切换开关不会更改复选框值/状态

Question

我正在尝试创建一个切换开关。我使用的模板来自：

https://www.w3schools.com/howto/howto_css_switch.asp

一切正常，但（隐藏）复选框的选中或值不会改变。我的angular（4）绑定需要这个值

你怎么能实现这个目标？

Answer 1

你可以使用绑定来做到这一点。

<input type="checkbox" [checked]="checkbx"
(change)="checkbx = !checkbx" formControlName="name">

In Ts file:
private checkbx: boolean = true;

constructor(private fb: FormBuilder){
    this.heroForm = this.fb.group({
    name: [this.checkbx, Validators.required ],
    });
}

addvalue(checkbx: boolean){
  console.log(this.heroForm.value)
}

check this live link