Disable toggle on form control

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

You can disable form control manually after enabling all form

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