Disable toggle on form control

Question

I have an initialized and disabled a form. Now, on a button click the form will be enabled. But the problem is one of the form control must be disabled at all time. When I enable the form, the disabled form control is getting enabled too.

Here's what I've done

onInit() {
  this.fruitForm = this.formBuilder.group({
    name: [this.fruit.name, [Validators.required]],
    supplier: [{ value: this.fruit.user, disabled: true }, [Validators.required]],
    quantity: [this.fruit.qty, [Validators.required]]
  });
  this.fruitForm.disable();
}

And enabling the form

edit() {
if (button == 'Modify') {
  this.fruitForm.enable();
  button = 'Save'
} else {
  this.fruitForm.disable();
  button = 'Modify'
}
}

And after clicking the button more than twice, the form is always enabled and it doesn't get disabled at all

Answer 1

You can disable form control manually after enabling all form

this.fruitForm.enable();
this.fruitForm.controls['supplier'].disable();