CODEWITHSUNDEEP
angularangular2-forms
user7906966
user7906966

Reputation: 51

matDatePicker ngModal issue in Angular2

Here is my Html code

 <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>

Code in component.ts file

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

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

I have the issue in ngModal.I get the following error.

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

When I remove the ngModal it works fine.

I have already imported FormsModule in app.module.

Can someone please help me with a solution

Upvotes: 1

Views: 1381

Answers (1)

Mohamed Gara
Mohamed Gara

Reputation: 2935

The correct directive is NgModel and not NgModal.

In general, the error you have is due to either the module that define the directive is not imported in your component's module or you misspelled the directive selector.

Here is the link to the official doc: https://angular.io/guide/attribute-directives#your-directive-isnt-working

Upvotes: 2

Related Questions