簡體   English   中英

Angular9-MatDatePicker:無法綁定到“ngModel”,因為它不是“輸入”的已知屬性

[英]Angular9-MatDatePicker: Can't bind to 'ngModel' since it isn't a known property of 'input'

我已經查看了有關此的其他幾個帖子,但我仍然在使用 matdatepicker 實現 ngmodel 綁定時遇到問題。

我的 HTML:

<mat-form-field>
    <mat-label>Start Date</mat-label>
    <input matInput [(ngModel)]="searchStartDate" [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"> 
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

對於上面的 html 代碼,我收到此錯誤: Can't bind to 'ngModel' since it isn't a known property of 'input'.

與上述 html 代碼關聯的 TS 文件:

import { Component, OnInit } from '@angular/core';
import { FormsModule,ReactiveFormsModule }   from '@angular/forms'; 
// I threw this in just in case^^


@Component({
  selector: 'app-dash-home',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  searchStartDate: Date; searchEndDate: Date
  constructor() {
    const todaysDate = new Date();
    this.minDate = new Date(todaysDate.getFullYear() - 5, 0, 1);
    this.maxDate = new Date(todaysDate.getFullYear(), todaysDate.getMonth(), todaysDate.getDate());
  }

  ngOnInit() {
  }
}

我已經嘗試調試這個問題幾個小時了,我不確定這是否是 Angular v9 問題。 I found a stackblitz example from another stackoverflow question which illustrates the expected behavior here (running Angular v7 I think): https://stackblitz.com/edit/angular-y8hqyn-52t76k?file=app%2Fdatepicker-value-example.html

請注意 stackblitz 示例如何初始化為今天的日期? 這就是我試圖模仿的行為。 我還在下面包含了我的 app.module.ts 以防萬一。

文件:app.module.ts

import { FormsModule, ReactiveFormsModule} from '@angular/forms';
imports: [...
    FormsModule,
...]

感謝所有預期的幫助和支持

編輯:

添加 ExampleComponent 所屬的模塊文件:

examplecomponent.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../../assets/material';



import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [...],
  imports: [
    ...,
    FormsModule
  ]
})
export class ExampleComponentModule{ }

您需要確保在聲明您的FormsModule的模塊中導入ExampleComponent

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM