Angular中[(ngModel)]与同名模板变量冲突报错，如何解决？

错误原因 #

编译报错的核心是模板引用变量与双向绑定的组件属性重名：

• [(ngModel)]="siteUrl" 绑定的是组件类中定义的siteUrl属性
• #siteUrl="ngModel" 定义了一个指向输入框NgModel实例的模板引用变量

Angular中模板引用变量属于只读变量，而[(ngModel)]是[ngModel]="siteUrl"和(ngModelChange)="siteUrl=$event"的语法糖，当两者同名时，Angular会误认为你要给只读的模板变量赋值，从而抛出错误。

修复代码 #

只需修改模板引用变量的名称，避免和组件属性重名即可，比如改为#siteUrlInput="ngModel"：

<div class="col col-xs-12 col-sm-6">                
    <input class="form-control" type="text" [(ngModel)]="siteUrl" 
      #siteUrlInput="ngModel" name="siteUrl" required>

    <div *ngIf="siteUrlInput.invalid && (siteUrlInput.dirty || siteUrlInput.touched)">
       <div *ngIf="siteUrlInput.errors['required']" class="red">
          siteUrl is required
       </div>
    </div>
 </div>

补充说明 #

你提到代码复制自另一个正常运行的Angular 13项目，大概率是该项目未启用strictTemplates严格模板检查，所以没有触发这个错误。但严格模式是Angular推荐的规范配置，保持模板引用变量和组件属性的命名区分，能避免后续更多潜在问题。

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