使用'input'的Angular 'ngModelOptions'会导致模板解析错误

将ngModelOptions与输入一起使用的目的是禁止作为双向绑定的一部分添加到模型对象的无效值.Below是代码片段:

<input type="text" class="form-control" id="xx" [formControl]="dob" 
placeholder="00/00/0000" [ngModelOptions]="{allowInvalid: false}" 
[(ngModel)]="xx.dob" minlength="10" maxlength="10" />

浏览器控制台上出现

  • 错误:
    compiler.es5.js:1690未捕获错误:模板解析错误:'t bind to ' ngModelOptions ' since it isn' t 'input'的已知属性 .

  • 问题:
    为了禁止绑定到ngModel的无效值,这是上面使用的正确方法吗?是否允许在角度中使用ngModelOptions?我也知道(ngModelChange)可用于仅将有效值设置为模型对象 . 但我试图用双向绑定[(ngModel)]和[ngModelOptions]来实现这一点 . 我也可以使用formControl的值更改来实现上述行为,但由于某些原因我们使用[(ngModel)]方法 . 我们正在使用Angular4.x
    我也是Angular的新手,所以如果我的理解是错误的,请纠正我 .

回答(1)

3 years ago

  • 我假设您收到错误,因为 FormsModule 未列在
@NgModule({..., imports: [FormsModule], ...}) 
export class MyModule {}
  • ngModelOptions 目前仅支持参数 namestandalone ,以及自Angular 5 onUpdate 以来

另见https://angular.io/api/forms/NgModel#options

据我所知,你不能阻止无效的值,至少不能以声明的方式 . 您可以对验证错误采取行动 .

另见https://angular.io/api/forms/AbstractControl#statusChanges(应该通过表格公开)