Angular 11升级至12后，input number绑定ngModel遇Parser Error问题

问题现象 #

升级Angular 11至12后，所有同时满足以下条件的matInput都会触发模板解析错误：

• 设置type="number"
• 配置了min属性
• 使用[(ngModel)]双向绑定数据

错误信息示例：

Parser Error: Conditional expression min ?? null requires all 3 expressions at the end of the expression [min ?? null] in ...
Parser Error: Unexpected token ? at column 6 in [min ?? null] in ...

原因分析 #

1. 版本不兼容：Angular框架与Angular Material组件库版本未同步，Angular 12的模板解析规则更严格，旧版本Material内部使用的空值合并运算符??会被拒绝。
2. 类型不匹配：原生HTML的min属性是字符串类型，而matInput期望接收数字类型，直接写min="0"会触发内部类型转换时的解析错误。

解决步骤 #

• 同步升级Angular Material到对应版本
  Angular框架与Material必须严格版本对应，执行命令升级：

  ng update @angular/material@12
  

  升级后检查package.json，确保所有@angular/*相关包的版本均为12.x.x。

• 调整min属性的绑定方式
  将原生字符串属性改为Angular属性绑定，传递数字类型值：

  <mat-form-field class="example-full-width margin-left-10 ">
    <input matInput class="form-control textarea-border" type="number"
           style="font-size: 20px; text-align: center; "
           [min]="0"
           [(ngModel)]="model.OdvagaPrva"/>
  </mat-form-field>
  

• 检查TypeScript配置
  确保tsconfig.json支持ES2020特性（空值合并运算符是ES2020新增特性）：

  {
    "compilerOptions": {
      "target": "ES2020",
      "lib": ["ES2020", "DOM"],
      // 其他保留配置
    }
  }
  

• 升级到Angular 12最新补丁版本
  若为Angular 12早期版本的bug，执行命令修复：

  ng update @angular/core@12 --force
  

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