angular set non-checked checkbox to false in serialized data

Question

I'd like for my checkbox to be initialized to false not NULL because the form will only set the checkbox value to false if it is first checked and unchecked, otherwise it stays null and i get this error.

Error converting value {null} to type 'System.Boolean'.Path 'inStock',line 1, position 84.

How do i initialize the form data to false using template forms in Angular?

createRegisterForm() {
this.registerForm = this.fb.group({
  partname:['', Validators.required],
  partdescription : ['', Validators.required],
  parturl: ['',null],
  sku: ['',null],
  inStock: '',
  isActive: '' 
})

}

registerPart() {
if (this.registerForm.valid) {
  this.part = Object.assign({}, this.registerForm.value);
  this.partsService.add(this.part).subscribe(() => {
    this.alertify.success('Part Registered');
  }, error => {
    this.alertify.error(error);
  });
}

Answer 1

everytime you run reset method will set the from value to null in that case you can provide a value as default value to false like this

this.registerForm.reset({
  inStock: false,
  isActive: false
});

and you need set the initial value during creation to false instead to empty string in case you dont call the rest method wilt values like above.

createRegisterForm() {
this.registerForm = this.fb.group({
  partname:['', Validators.required],
  partdescription : ['', Validators.required],
  parturl: ['',null],
  sku: ['',null],
  inStock: false,
  isActive: false 
})
}

check this demo ⚡⚡ where I cover all cases where form control value can be endup null and why to fix this