angular - navigationend - Errores de análisis sintáctico de la plantilla: ''md-form-field'' no es un elemento conocido

router events subscribe angular 4

Question

Estoy usando Angular 4 y Angular Material 2. Para el siguiente código:

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

Me aparece un error:

Errores de análisis sintáctico de la plantilla: ''md-form-field'' no es un elemento conocido : 1. Si ''md-form-field'' es un componente angular, entonces verifique que sea parte de este módulo. 2. Si ''md-form-field'' es un componente web, entonces agregue ''CUSTOM_ELEMENTS_SCHEMA'' a ''@ NgModule.schemas'' de este componente para suprimir este mensaje. ("[ERROR ->]

¿Podrías por favor ayudarme donde estoy perdido?

A continuación está mi código app.module.ts donde he importado módulos de materiales:

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

Answer 1

Puede usar md-input-container de esta manera:

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

Answer 2

Si encuentra dificultades para importar archivos, solo puede tener una metodología para importar.

Primero importe los componentes necesarios en su .component.ts

E importe el módulo específico en su módulo .module.ts

Y luego agréguelo en las importaciones en @NgModule ({ imports : [ <Example>Module ] })

Ejemplo que desea importar controles de formulario solo en su aplicación angular

1). app.component.ts

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

2). app.module.ts

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

a continuación en app.module.ts en

@NgModule ({ imports : [ FormsModule ] })

Answer 3

ACTUALIZAR:

Desde 2.0.0-beta.12 , el prefijo md ha sido eliminado a favor del prefijo mat . Vea este CHANGELOG para más detalles:

Todos los prefijos "md" han sido eliminados. Consulte el aviso de obsolescencia en las notas beta.11 para obtener más información.

Después de la actualización, <md-form-field> debe cambiarse a <mat-form-field> . Además, MdFormFieldModule y MdInputModule deberían cambiarse a MatFormFieldModule y MatInputModule :

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

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

Aquí hay un enlace a la demo actualizada de StackBlitz usando 2.0.0-beta.12 .

ORIGINAL:

<md-form-field> se introdujo en 2.0.0-beta.10 . Consulte a continuación la documentación de registro de cambios:

md-input-container renombrado a md-form-field (mientras sigue siendo compatible con versiones anteriores). El selector anterior se eliminará en una versión posterior.

Aquí hay un enlace para completar CHANGELOG .

Para usar el selector <md-form-field> , asegúrese de tener instalada la versión 2.0.0-beta.10 del material. Además, debe importar el módulo MdFormFieldModule en AppModule importaciones de AppModule :

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

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

Para cualquiera que se tropiece con esta pregunta, aquí hay un enlace a la demostración de trabajo en StackBlitz.