Angular输入组件禁用时值不一致问题求助

1. 双向绑定与表单控件冲突：组件模板同时使用[(ngModel)]和formControlName，Angular中这两种绑定方式不应混用，会导致值状态同步混乱。
2. ControlValueAccessor实现不完整：未实现setDisabledState方法，Angular表单控件的禁用状态无法正确同步到组件内部，且disabled作为@Input会与表单控件的状态管理冲突。
3. Story中表单初始化逻辑问题：当通过控制面板修改disabled时，会基于原始args.value重新创建表单组，覆盖手动输入后的最新值。

1. 修复输入组件代码 #

修改 input-test.component.ts #

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-input-test',
  templateUrl: './input-test.component.html',
  styleUrls: ['./input-test.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTestComponent),
      multi: true,
    },
  ],
})
export class InputTestComponent implements ControlValueAccessor  {
  // 移除@Input()，值由ControlValueAccessor的writeValue控制
  value: string = '';
  disabled: boolean = false;

  onChange: any = () => {};
  onTouch: any = () => {};

  writeValue(value: any): void {
    this.value = value ?? '';
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }

  // 实现setDisabledState方法，同步表单控件的禁用状态
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  updateValue(event: Event): void {
    const newValue = (event.target as HTMLInputElement).value;
    this.value = newValue;
    this.onChange(this.value);
    this.onTouch();
  }
}

修改 input-test.component.html #

移除[(ngModel)]绑定，仅保留表单控件驱动的属性：

<input 
  type="text"
  [value]="value"
  [disabled]="disabled"
  (input)="updateValue($event)"
/>

2. 修复Story代码 #

修改 InputTest.stories.ts #

移除模板中冲突的[(ngModel)]和[disabled]绑定，通过表单控件统一管理值和禁用状态：

import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { InputTestComponent } from 'src/app/input-test/input-test.component';
import { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';

const meta: Meta<InputTestComponent> = {
  component: InputTestComponent,
  title: 'Basic Components/InputTestComponent',
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      declarations: [InputTestComponent],
      imports: [FormsModule, ReactiveFormsModule],
    }),
  ],
  argTypes: {
    initialValue: { control: 'text', defaultValue: 'default' },
    disabled: { control: 'boolean', defaultValue: false },
  },
};
export default meta;

type Story = StoryObj<InputTestComponent>;

export const Default: Story = {
  args: {
    initialValue: 'default',
    disabled: false,
  },
  render: (args) => ({
    props: {
      args,
      form: new FormBuilder().group({
        name: [{ value: args.initialValue, disabled: args.disabled }],
      }),
      updateForm: function() {
        const control = this.form.get('name');
        if (control) {
          // 仅在初始值主动修改时更新值，避免覆盖手动输入内容
          if (this.args.initialValue !== control.value) {
            control.setValue(this.args.initialValue);
          }
          this.args.disabled ? control.disable() : control.enable();
        }
      },
    },
    template: `
        <form [formGroup]="form" (ngOnInit)="updateForm()">
          <app-input-test formControlName="name"></app-input-test>  
        </form>
        <div>Name: {{ form.get('name').value }}</div>
      `,
  }),
};

1. 在Storybook控制面板中设置initialValue为hello，确认输入框显示正确。
2. 将disabled设为true，输入框禁用且值保持hello，恢复false后正常可编辑。
3. 手动输入hello11，再将disabled设为true，此时输入框值仍为hello11，禁用状态生效，无值回退问题。

内容的提问来源于stack exchange，提问作者Jinglemahn