Angular输入框设为disabled后为何无法保留输入值？

核心问题出在组件未响应@Input属性的动态变化，且Storybook修改参数时会触发组件重新渲染：

1. 组件仅在ngOnInit中初始化FormControl，使用的是组件初始的value和disabled值。
2. 手动输入"hello"后，FormControl的value更新为"hello"，但组件的@Input() value仍保持初始的空字符串。
3. 在Storybook中修改disabled为true时，会触发组件重新渲染，ngOnInit再次执行，用空的value创建新的FormControl，导致输入框内容丢失。

另外，组件未监听disabled属性的变化，无法动态更新FormControl的禁用状态，每次重新渲染都会重置控件状态。

需要让组件响应value和disabled的动态变化，同时保留FormControl的现有状态：

方案1：用ngOnChanges监听输入变化 #

修改input.component.ts，移除ngOnInit中的控件初始化逻辑，改用ngOnChanges更新已有控件：

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnChanges {
  @Input() value: string = '';
  @Input() disabled: boolean = false;
  inputValue: FormControl = new FormControl({ value: '', disabled: false }, [Validators.required]);

  ngOnChanges(changes: SimpleChanges): void {
    // 同步外部传入的value变化（避免覆盖用户手动输入）
    if (changes['value'] && !changes['value'].firstChange) {
      this.inputValue.setValue(changes['value'].currentValue);
    }
    // 动态更新控件禁用状态
    if (changes['disabled']) {
      const isDisabled = changes['disabled'].currentValue;
      isDisabled ? this.inputValue.disable() : this.inputValue.enable();
    }
  }

  constructor() {
    // 初始化控件初始状态
    this.inputValue.setValue(this.value);
    if (this.disabled) this.inputValue.disable();
  }
}

方案2：为@Input设置setter #

通过setter分别监听value和disabled的变化：

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 {
  private _value: string = '';
  private _disabled: boolean = false;
  inputValue: FormControl = new FormControl({ value: '', disabled: false }, [Validators.required]);

  @Input()
  set value(val: string) {
    this._value = val;
    if (this.inputValue.value !== val) {
      this.inputValue.setValue(val);
    }
  }
  get value(): string {
    return this._value;
  }

  @Input()
  set disabled(val: boolean) {
    this._disabled = val;
    val ? this.inputValue.disable() : this.inputValue.enable();
  }
  get disabled(): boolean {
    return this._disabled;
  }

  constructor() {
    // 初始化初始状态
    this.inputValue.setValue(this._value);
    if (this._disabled) this.inputValue.disable();
  }
}

额外优化：Storybook模板调整 #

Story模板中的错误提示逻辑依赖外部value参数，与组件内部校验逻辑重复，建议修改为：

<form>
  <app-input [value]="value" [disabled]="disabled"></app-input>
</form>

组件内部已处理错误提示，无需在Story中重复实现，避免逻辑不一致。

修改完成后，输入框在禁用时会保留已输入的内容，符合预期行为。

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