Mẫu phân tích lỗi: 'dạng trường md' không phải là một yếu tố được biết đến

Question

Tôi đang sử dụng góc 4 và góc Chất liệu 2. Đối với đoạn mã sau:

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

Tôi nhận được một lỗi:

Template parse errors: 'md-form-field' is not a known element: 1. If 'md-form-field' is an Angular component, then verify that it is part of this module. 2. If 'md-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]

Bạn có thể vui lòng giúp tôi nơi tôi bị thiếu không?

Tiếp theo là mã app.module.ts tôi, nơi tôi đã nhập khẩu module vật liệu:

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

UPDATE:

Kể từ 2.0.0-beta.12, md tiền tố đã được gỡ bỏ ủng hộ mat tiền tố. Xem CHANGELOG này để biết chi tiết:

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

Sau khi cập nhật, <md-form-field> nên được thay đổi để <mat-form-field>. Ngoài ra, MdFormFieldModule và MdInputModule nên được đổi tên thành MatFormFieldModule và MatInputModule:

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

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

Dưới đây là một liên kết đến Updated StackBlitz bản demo sử dụng 2.0.0-beta.12.

---

ORIGINAL:

<md-form-field> được giới thiệu vào 2.0.0-beta.10. Xem bên dưới từ tài liệu về changelog:

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

Đây là liên kết để hoàn thành CHANGELOG.

Để sử dụng bộ chọn <md-form-field>, hãy đảm bảo rằng bạn đã cài đặt phiên bản 2.0.0 beta beta của tài liệu. Hơn nữa, bạn cần phải nhập khẩu MdFormFieldModule mô-đun trong bạn AppModule nhập khẩu:

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

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

Đối với bất cứ ai tình cờ gặp câu hỏi này, đây là một liên kết đến working demo trên StackBlitz.

Answer 2

Bạn có thể sử dụng md-input-container như thế này:

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

Answer 3

Nếu bạn đang tìm kiếm khó khăn nhập các file sau đó chỉ cần bạn có thể có một phương pháp để nhập khẩu.

đầu tiên nhập khẩu bất kỳ thành phần cần thiết trong .component.ts bạn

Và import module cụ thể trong .module mô-đun của bạn.ts

Và sau đó thêm nó vào nhập khẩu trong @NgModule ({ imports : [ <Example>Module ] })

Ví dụ bạn muốn nhập formcontrols chỉ trong bạn góc ứng dụng

1). app.component.ts

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

2). app.module.ts

import { FormsModule } from '@angular/forms'

dưới đây trong app.module.ts trong

@NgModule ({ imports : [ FormsModule ] })