typescript - Angular checkbox with boolean

Question

I'm working on a Angular project where I need to give an use admin right. The isAdmin is a boolean (false/true). But it can't figure it how to parse the right value to the component and save the value.

<div class="checkbox">
   <label>
     <input type="checkbox" name="isAdmin" [(ngModel)]="user.isAdmin" [checked]="item.checked">
     Is Admin?
   </label>
</div>

The component.ts looks likes this:

this.userForm.get('isAdmin').valueChanges.subscribe(val => {
  this.newUser.isAdmin = !!val;
});

Can someone see what is mine mistake?

question from:https://stackoverflow.com/questions/65953119/angular-checkbox-with-boolean

Answer 1

In your html you are using template based forms. But in your ts you are using a Reactive forms approach.

So you should change your HTML to use a Reactive forms approach like the following:

<div class="checkbox">
   <label>
     <input type="checkbox" name="isAdmin" [formControl]="userForm.get('isAdmin')" [checked]="item.checked">
     Is Admin?
   </label>
</div>