为什么输入文本字段在禁用时不保留其值？

问：

我正在使用在 StorybookJS 中运行的 Angular 处理一个简单的输入字段。我面临的问题是，当设置为 true 时，输入文本字段没有保留其值。disabled

因此，当我在输入字段中手动键入“hello”文本时，情况如下：

当我将属性设置为 时，输入字段被禁用，但没有保留值“hello”，而是显示一个不正确的空文本。disabledtrue

尽管如此，在我上面描述的代码下方。

在 input.component.html 中

<input [formControl]="inputValue" />
<div *ngIf="inputValue.invalid && inputValue.touched">
  <small *ngIf="inputValue.errors" class="error-text">This field is required.</small>
</div>

在input.component.ts

import { Component, Input } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent {
  @Input() value: string = '';
  @Input() disabled: boolean = false;
  // Create a FormControl to handle the input value and validation
  inputValue: FormControl = new FormControl();
  constructor() {}
  ngOnInit(): void {
    this.inputValue = new FormControl(
      { value: this.value, disabled: this.disabled },
      [Validators.required]
    );
  }
}

在Input.stories.ts

import { InputComponent } from './../../app/input/input.component';
import { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const meta: Meta<InputComponent> = {
  component: InputComponent,
  title: 'Basic Components/InputComponent',
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      declarations: [InputComponent],
      imports: [FormsModule, ReactiveFormsModule],
    }),
  ],
  args: {},
  render: (args: InputComponent) => ({
    props: {
      ...args,
    },
  }),
  argTypes: {},
};
export default meta;
type Story = StoryObj<InputComponent>;

export const Default: Story = {
  args: {
    value: '', 
    disabled: false,
  },
  render: (args) => ({
    props: {
      ...args,
    },
    template: `
        <form>
          <app-input [value]="value" [disabled]="disabled"></app-input>
          <!-- Adding an error message display in the story -->
          <div *ngIf="!value && value !== null">
            <small class="error-text">This field is required.</small>
          </div>
        </form>
      `,
  }),
};

我可以得到一些帮助，为什么输入文本字段在禁用时不保留输入的值？谢谢。