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.