Переключатель css не изменяет значение / состояние флажка

Question

Я пытаюсь создать тумблер. искушение я использовал от:

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

все работает нормально, но флажок или значение (скрытое) не изменяются. Мне нужно это значение для моего углового (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)
}

проверить эту прямую ссылку