Vraag Fout in sjabloonanalyse: 'md-form-field' is geen bekend element


Ik gebruik Angular 4 en Angular Material 2. Voor de volgende code:

<form>
  <md-form-field>
    <input mdInput [ngModel]="userName" placeholder="User" [formControl]="usernameFormControl">
    <md-error *ngIf="usernameFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <input mdInput [ngModel]="password" placeholder="Password" [formControl]="passwordFormControl">
    <md-error *ngIf="passwordFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <button md-raised-button color="primary" [disabled]="!usernameFormControl.valid || !passwordFormControl.valid">Login</button>
  </md-form-field>
</form>

Ik krijg een foutmelding:

Sjabloonfouten analyseren: 'md-form-field' is geen bekend element:   1. Als 'md-form-field' een Angular component is, controleer dan of het deel uitmaakt van deze module.   2. Als 'md-form-field' een webcomponent is, voegt u 'CUSTOM_ELEMENTS_SCHEMA' toe aan de '@ NgModule.schemas' van dit onderdeel   om dit bericht te onderdrukken. ("[FOUT ->]

Kan je me alsjeblieft helpen waar ik ben vermist?

Het volgende is mijn app.module.ts code waar ik materiële modules heb geïmporteerd:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdCoreModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdSortModule,
  MdTableModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule
} from '@angular/material';

import {CdkTableModule} from '@angular/cdk';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    MdAutocompleteModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdChipsModule,
    MdCoreModule,
    MdDatepickerModule,
    MdDialogModule,
    MdExpansionModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdNativeDateModule,
    MdPaginatorModule,
    MdProgressBarModule,
    MdProgressSpinnerModule,
    MdRadioModule,
    MdRippleModule,
    MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdSnackBarModule,
    MdSortModule,
    MdTableModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    CdkTableModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

31
2017-08-30 07:25


oorsprong


antwoorden:


BIJWERKEN:

Sinds 2.0.0-beta.12, md voorvoegsel is verwijderd in het voordeel van mat voorvoegsel. Zie dit CHANGELOG voor details:

Alle voorvoegsels "md" zijn verwijderd. Zie de kennisgeving van afkeuring in de   beta.11-notities voor meer informatie.

Na de update, <md-form-field> moet worden gewijzigd in <mat-form-field>. Ook, MdFormFieldModule en MdInputModule moet worden gewijzigd in MatFormFieldModule en MatInputModule:

import { MatFormFieldModule } from '@angular/material';
import { MatInputModule } from '@angular/material';

@NgModule({
  imports: [
    ....
    MatFormFieldModule,
    MatInputModule,
    ....
  ]

Hier is een link naar StackBlitz bijgewerkt demo gebruiken 2.0.0-beta.12.


ORIGINAL: 

<md-form-field> werd geïntroduceerd in 2.0.0-beta.10. Zie hieronder uit de changelog documentatie:

md-input-container hernoemd naar md-form-field (terwijl het nog steeds is   terugwaartse compatibiliteit). De oude selector wordt in een volgende release verwijderd.

Hier is een link om te voltooien CHANGELOG.

Gebruiken <md-form-field> selector, zorg ervoor dat u versie 2.0.0-beta.10 van het geïnstalleerde materiaal hebt. Bovendien moet je importeren MdFormFieldModule module in jou AppModule invoer:

import { MdFormFieldModule } from '@angular/material';
import { MdInputModule } from '@angular/material';

@NgModule({
  imports: [
    ....
    MdFormFieldModule,
    MdInputModule,
    ....
  ]

Voor iedereen die deze vraag ontdekt, hier is een link naar werkende demo op StackBlitz.


42
2017-08-30 07:49



Als u problemen ondervindt bij het importeren van bestanden, hoeft u slechts één methode te importeren.

Importeer eerst alle vereiste componenten in uw .component.ts

En importeer de specifieke module in uw module .module.ts

En dan toevoegen in de invoer in @NgModule ({ imports : [ <Example>Module ] })

Voorbeeld dat u formcontrols alleen in uw hoekapplicatie wilt importeren

1). app.component.ts

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

2). app.module.ts

import { FormsModule } from '@angular/forms'

hieronder in app.module.ts in

@NgModule ({ imports : [ FormsModule ] }) 


1
2017-12-08 16:30



U kunt md-invoer-container als volgt gebruiken:

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


0
2017-11-10 07:21