Template parse errors: 'md-form-field' is not a known element

前端 未结 3 1209
情歌与酒
情歌与酒 2020-12-05 09:27

I am using Angular 4 and Angular Material 2. For the following code :

相关标签:
3条回答
  • 2020-12-05 09:57

    You can use md-input-container like this :

    <md-input-container>
     <input mdInput name="name" [(ngModel)]="yourModel" class="filter-input-field"/>
    </md-input-container>

    0 讨论(0)
  • 2020-12-05 09:58

    UPDATE:

    Since 2.0.0-beta.12, md prefix has been removed in favor of mat prefix. See this CHANGELOG for details:

    All "md" prefixes have been removed. See the deprecation notice in the beta.11 notes for more information.

    After the update, <md-form-field> should be changed to <mat-form-field>. Also, MdFormFieldModule and MdInputModule should be changed to MatFormFieldModule and MatInputModule:

    import { MatFormFieldModule } from '@angular/material';
    import { MatInputModule } from '@angular/material';
    
    @NgModule({
      imports: [
        ....
        MatFormFieldModule,
        MatInputModule,
        ....
      ]
    

    Here is a link to Updated StackBlitz demo using 2.0.0-beta.12.


    ORIGINAL:

    <md-form-field> was introduced in 2.0.0-beta.10. See below from the changelog documentation:

    md-input-container renamed to md-form-field (while still being backwards compatible). The old selector will be removed in a subsequent release.

    Here is a link to complete CHANGELOG.

    To use <md-form-field> selector, make sure that you have version 2.0.0-beta.10 of material installed. Moreover, you need to import MdFormFieldModule module in you AppModule imports:

    import { MdFormFieldModule } from '@angular/material';
    import { MdInputModule } from '@angular/material';
    
    @NgModule({
      imports: [
        ....
        MdFormFieldModule,
        MdInputModule,
        ....
      ]
    

    For anyone who stumbles upon this question, here is a link to working demo on StackBlitz.

    0 讨论(0)
  • 2020-12-05 10:05

    If you are finding difficulties importing files then just you can have one methodology to import.

    First import any required components in your .component.ts

    And import the specific module in your module .module.ts

    And then add it in imports in @NgModule ({ imports : [ <Example>Module ] })

    Example you want to import formcontrols just in you angular application

    1). app.component.ts

    `import { FormGroup, FormControl } from '@angular/forms'`
    

    2). app.module.ts

    import { FormsModule } from '@angular/forms'

    below in app.module.ts in

    @NgModule ({ imports : [ FormsModule ] })

    0 讨论(0)
提交回复
热议问题