Angular中使用ngModel为表单赋值异常问题求助

1. 修正模板中ngModel的错误绑定 #

你的select控件错误使用了this.configGeneral.devise，Angular模板上下文默认指向组件实例，不需要添加this前缀，这会导致绑定失效。同时，表单内使用ngModel的控件必须添加name属性或设置独立模式。

修复后的HTML代码：

<form>
  <div class="form-group row">
      <label class="col-sm-4 col-form-label" for="libelleInterne">Libelle interne du cabinet</label>
      <div class="col-sm-7">
        {{configGeneral.libelleInterneCabinet}}
        <!-- 添加name属性 -->
        <input class="form-control" id="libelleInterne" type="text" name="libelleInterne" [(ngModel)]="configGeneral.libelleInterneCabinet">
    </div>
  </div>

  <div class="form-group row">
      <label class="col-sm-4 col-form-label" for="devise">Devise</label>
      <div class="col-sm-7">
        {{configGeneral.devise}}
              <!-- 去掉this前缀，添加name属性 -->
              <select class="form-select" id="devise" name="devise" [(ngModel)]="configGeneral.devise">
                  <option value="Euro">Euro</option>
              </select>
      </div>
  </div>
</form>

如果不想添加name属性，可以给控件设置独立模式：

<!-- input设置独立模式 -->
<input class="form-control" id="libelleInterne" type="text" [(ngModel)]="configGeneral.libelleInterneCabinet" [ngModelOptions]="{standalone: true}">

<!-- select设置独立模式 -->
<select class="form-select" id="devise" [(ngModel)]="configGeneral.devise" [ngModelOptions]="{standalone: true}">
    <option value="Euro">Euro</option>
</select>

2. 确保导入FormsModule #

使用[(ngModel)]必须在组件所在的模块中导入FormsModule，否则绑定功能会失效。在你的模块文件中添加：

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

@NgModule({
  imports: [
    // 其他已导入的模块
    FormsModule
  ]
})
export class YourModule { }

3. 可选：确保对象赋值后的变更检测正常 #

如果修正上述问题后仍有异常，可以尝试通过逐个赋值属性而非直接替换对象引用来确保变更检测触发：

getConfigurationGeneral(){
    this.configGeneralService.getConfigGeneralOfCabinet().pipe(
      tap((data)=>{
        if (data != null){
          this.configGeneral.idConfigGeneral = data.idConfigGeneral;
          this.configGeneral.libelleInterneCabinet = data.libelleInterneCabinet;
          this.configGeneral.devise = data.devise;
        }
      })
    ).subscribe();
}

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