css Toggle switch does not change checkbox value/s

问题:

I am trying to create an toggle a switch. the tempate I used is from:

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

every things works fine but the checked or value of the (hidden) checkbox does not change. I need this value for my angular(4) binding

How can you acchieve this?

回答1:

you can do this using binding.

<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