Question

这是我的Html代码

 <div>
    <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModal)]="picker"  >
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <button type="submit">Go</button>
</div>

component.ts文件中的代码

picker: Date;
    constructor(private httpservice: HttpservService) {} 

 ngOnInit() {
      this.picker = new Date();
  }

我在ngModal中遇到了问题。我收到以下错误。

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModal' since it isn't a known property of 'input'. (" <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [ERROR ->][(ngModal)]="picker"  >
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker"): 

    ng:///app/dashboard/dashboard.component.html@3:81 ; Zone: <root> ; 
    Task: Promise.then ; Value: Error: Template parse errors:


Can't bind to 'ngModal' since it isn't a known property of 'input'. (" <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date" [ERROR ->][(ngModal)]="picker"  >            
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker"): ng:///app/dashboard/dashboard.component.html@3:81

当我删除ngModal时，它工作正常。

我已经在app.module中导入了FormsModule。

有人可以帮我解决问题吗

Answer 1

正确的指令是NgMod e l而不是NgMod a l。

通常，您遇到的错误是由于定义指令的模块未导入组件的模块中，或者您拼错了指令选择器。

以下是官方文档的链接：https://angular.io/guide/attribute-directives#your-directive-isnt-working

Angular2中的matDatePicker ngModal问题

1 个答案: