Angular生产构建报错：无法赋值给只读属性'total'

Hey there, let's break down what's going wrong here and fix it properly.

问题根源 #

你遇到的报错本质是**formControlName和[(ngModel)]在同一个输入框上的绑定冲突**：

• formControlName属于Angular响应式表单体系，它会把输入框的状态（值、校验状态等）完全交由对应的FormControl实例管理。
• [(ngModel)]则试图直接双向绑定到组件类里的total属性，如果这个属性被声明为const或readonly，自然会触发“无法赋值给只读属性”的报错。而且Angular在较新版本中已经明确不推荐混用这两种绑定方式。

至于改用[value]="total"后无法保存值，是因为[value]是单向绑定——它只会把组件里的total初始值显示到输入框，但用户在输入框的操作不会同步回组件，也不会更新FormControl的状态，所以保存时拿不到最新的输入值。

解决方案 #

这里有两种符合Angular最佳实践的解决方式，你可以根据需求选择：

方案1：完全依赖响应式表单管理值（推荐）

既然你在用formControlName，那就让FormGroup和FormControl全权负责表单状态，去掉[(ngModel)]：

1. 组件类代码：确保表单组正确初始化total控件

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  yourForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，可设置total的初始值
    this.yourForm = this.fb.group({
      total: [''] // 替换成你的total变量初始值即可
    });
  }

  // 保存表单逻辑
  saveForm() {
    // 直接从表单控件获取最新值
    const totalValue = this.yourForm.get('total')?.value;
    // 执行你的保存操作，比如调用接口、存储数据
    console.log('待保存的total值:', totalValue);
  }
}

2. 模板代码：只保留formControlName绑定

<input formControlName="total" id="total" type="text" class="validate">

这样输入框的任何变化都会自动同步到FormControl中，保存时直接从表单取值即可，完全不需要依赖组件类里的total属性。

方案2：同步表单值到组件类的total属性

如果你确实需要组件类的total属性和表单值保持同步，可以通过FormControl的valueChanges订阅实现：

1. 组件类代码：

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  total: string; // 你需要同步的属性
  yourForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 用total的初始值初始化表单控件
    this.yourForm = this.fb.group({
      total: [this.total]
    });

    // 订阅表单值变化，同步到total属性
    this.yourForm.get('total')?.valueChanges.subscribe(newValue => {
      this.total = newValue;
    });
  }

  saveForm() {
    // 此时this.total和表单控件的值完全一致，用哪个都可以
    console.log('待保存的total值:', this.total);
  }
}

2. 模板代码：依然只保留formControlName

<input formControlName="total" id="total" type="text" class="validate">

这种方式既避免了绑定冲突，又能让组件类的total属性和表单状态保持同步。

总结 #

不要再混用formControlName和[(ngModel)]，响应式表单的核心就是用FormGroup/FormControl统一管理状态，这样代码更清晰，也能避免这类奇怪的报错。

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