Angular中ngModel默认值失效但响应式表单正常的问题

问题根源 #

1. ControlValueAccessor类型错误：registerOnChange和registerOnTouched的参数类型定义错误，导致Angular无法正确传递表单值变更。
2. 双重绑定冲突：RadioGroup组件内部同时使用[(ngModel)]="value"，与自身实现的ControlValueAccessor逻辑冲突，初始值被覆盖为null。
3. 值变更逻辑冗余：ValueAccessor的set value方法每次赋值都触发onChange和onTouched，可能导致不必要的循环更新。

修复步骤及代码 #

1. 修正ValueAccessor的类型与逻辑

@Component({ template: '' })
export class ValueAccessor<T> implements ControlValueAccessor {
  @Input() disabled = false;
  @Input() required = false;
  @Input() name = '';
  protected _value?: T;

  get value(): T | undefined {
    return this._value;
  }

  @Input()
  set value(value: T | undefined) {
    // 仅在值实际变化时触发变更通知
    if (this._value !== value) {
      this._value = value;
      this.onChange(value);
    }
  }

  protected onChange = (_: T | undefined) => {};
  protected onTouched = () => {};

  // 修正registerOnChange参数类型：接收值参数，无返回值
  registerOnChange(fn: (value: T | undefined) => void): void {
    this.onChange = fn;
  }

  // 修正registerOnTouched参数类型：无参无返回值
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  writeValue(value: T): void {
    // 直接更新内部变量，避免触发set value中的onChange，防止循环
    if (value !== undefined && this._value !== value) {
      this._value = value;
    }
  }

  // 实现可选方法，同步禁用状态
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
}

2. 重构RadioGroup组件，移除内部双向绑定

@Component({
  selector: 'radio-group',
  template: `
    <mat-radio-group
      #radioGroup
      [value]="value"
      (change)="onRadioGroupChange($event)"
      [disabled]="disabled"
    >
      <ng-content></ng-content>
    </mat-radio-group>
  `,
  styleUrls: ['./radio-group.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => RadioGroup),
      multi: true,
    },
  ],
})
export class RadioGroup<T = any> extends ValueAccessor<T> {
  @ViewChild('radioGroup') radioGroup!: MatRadioGroup;

  ngAfterViewInit() {
    // 初始化时同步初始值到MatRadioGroup
    if (this.value !== undefined) {
      this.radioGroup.value = this.value;
    }
  }

  onRadioGroupChange(event: MatRadioChange) {
    // 同步单选组变更值，并标记为已触碰
    this.value = event.value as T;
    this.onTouched();
  }
}

修复说明 #

• 类型修正：确保registerOnChange和registerOnTouched符合Angular ControlValueAccessor的接口规范，让表单系统能正确传递值变更。
• 移除内部ngModel：RadioGroup自身作为表单控件实现了值访问逻辑，无需再用ngModel，避免双重绑定导致的初始值覆盖问题。
• 优化值更新逻辑：减少不必要的变更通知，避免循环更新，同时确保初始值能正确同步到内部的mat-radio-group。
• 同步禁用状态：实现setDisabledState方法，确保表单控件的禁用状态能正确传递到Material组件。

内容的提问来源于stack exchange，提问作者Get Off My Lawn