Angular中number类型输入框设置value=1不生效该如何解决

你使用了Angular的双向绑定语法[(ngModel)]，该语法绑定的变量优先级远高于原生HTML的value属性，因此你设置的value="1"不会生效，输入框的显示值完全由WorkItemSelection.CopyQuantity的初始值决定，出现为空的情况是因为该变量的初始值为undefined、null或空值。

• 方案1（最推荐）：直接在组件TS文件中给绑定变量赋初始值
  在组件类初始化WorkItemSelection对象时，直接指定CopyQuantity的默认值为1即可，示例代码：

// 组件类中初始化对象
WorkItemSelection = {
  // 其余原有属性保持不变
  CopyQuantity: 1
}

如果WorkItemSelection是类实例，在对应的构造函数中给CopyQuantity属性赋值为1即可。

这种方式下可以直接删掉模板中无用的value="1"属性，优化后的模板代码如下：

<mat-form-field appearance="outline">
  <mat-label>Amount</mat-label>
  <input matInput type="number" [(ngModel)]="WorkItemSelection.CopyQuantity"
         name="CopyQuantity">
</mat-form-field>

• 方案2：在模板中设置兜底默认值
  如果你不方便修改TS文件中的初始赋值，可以把双向绑定拆分，添加默认值兜底逻辑，修改模板代码如下：

<mat-form-field appearance="outline">
  <mat-label>Amount</mat-label>
  <input matInput type="number" 
         [ngModel]="WorkItemSelection.CopyQuantity ?? 1"
         (ngModelChange)="WorkItemSelection.CopyQuantity = $event"
         name="CopyQuantity">
</mat-form-field>

请确认你当前组件所属的NgModule已经导入了FormsModule，否则ngModel双向绑定逻辑无法正常运行。

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