Repository: storybook
Issue: [Bug]: angular form with controls disable and enable a form element doesn't work 
Labels: bug,needs triage

### Describe the bug

I have a from element that want to let other developers set the disable state using controls 
![msedge_FpCa3bqrsY](https://user-images.githubusercontent.com/8991783/211524898-8801a836-31ad-44d1-a80f-280963cb06bb.gif)

As you see in the gif, everything works, except the disable and enable, strangely with button's click event, we can enable and disable an element. I think the issue should be about triggering something out of zonjejs but not sure how to resolve it other than put two ugly button in the page

### To Reproduce

```shell
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Meta, moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';

export default {
  title: 'UI/Input Text Field',
  decorators: [
    moduleMetadata({
      imports: [ReactiveFormsModule, CommonModule]
    })
  ],
  argTypes: {
    type: {
      control: { type: 'text' }
    },
    value: {
      control: { type: 'text' }
    },
    placeHolder: {
      control: { type: 'text' }
    },
    disabled: {
      options: [true, false],
      control: { type: 'inline-radio' }
    },
    required: {
      options: [true, false],
      control: { type: 'inline-radio' }
    }
  }
} as Meta;

const InputTextFieldTemplate = args => {
  const formGroup = new FormGroup({
    testInput: new FormControl(
      { value: args.value, disabled: args.disabled },
      args.required ? [Validators.required] : []
    )
  });
  const log = value => console.log('call-> ', value);
  // I also tried to use another approach to use disable() and enable(), but this also didnt' work 
  // const formControl = formGroup.get('testInput');
  // if (args.disabled) {
  //   formControl?.disable();
  // } else {
  //   formControl?.enable();
  // }

  return {
    props: {
      ...args,
      form: formGroup,
      log
    },
    template: `
<!--        {{log(form)}}-->
        <div [formGroup]="form">
          <p *ngIf="form.get('testInput').hasError('required')" style="color:red;">has error</p>
          <input [type]="type" formControlName="testInput" />
          <button (click)="form.get('testInput').disable()">disable</button>
          <button (click)="form.get('testInput').enable()">enable</button>
        </div>
    `
  };
};

export const InputTextField = InputTextFieldTemplate.bind({});
InputTextField.args = {
  type: 'text',
  value: 'value of the input',
  disabled: false,
  required: true
};
```


### System

```shell
System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.76)
  npmPackages:
    @storybook/addon-essentials: ^6.5.12 => 6.5.12
    @storybook/addon-knobs: ^6.3.1 => 6.3.1
    @storybook/angular: ^6.5.12 => 6.5.12
    @storybook/builder-webpack5: ^6.5.12 => 6.5.12
    @storybook/manager-webpack5: ^6.5.12 => 6.5.12
    @storybook/preset-scss: ^1.0.3 => 1.0.3
```


### Additional context

_No response_