खाका पार्स त्रुटियाँ: 'MD-फार्म क्षेत्र' एक ज्ञात तत्व

Question

मैं उपयोग कर रहा हूँ कोणीय 4 और कोणीय सामग्री 2. निम्न कोड के लिए नहीं है:

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

मैं एक त्रुटि हो रही है:

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

क्या आप कृपया मेरी मदद कर सकते हैं जहां मुझे याद आ रही है?

के बाद मेरी app.module.ts कोड जहाँ मैं सामग्री मॉड्यूल आयात किया है है:

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

अद्यतन:

2.0.0-beta.12 के बाद से, md उपसर्ग mat उपसर्ग के पक्ष में हटा दिया गया है। जानकारी के लिए इस CHANGELOG देखें:

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

अद्यतन के बाद, <md-form-field><mat-form-field> को बदला जाना चाहिए। इसके अलावा, MdFormFieldModule और MdInputModuleMatFormFieldModule और MatInputModule को नाम दिया जाना चाहिए:

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

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

यहाँ 2.0.0-beta.12 का उपयोग कर Updated StackBlitz डेमो के लिए एक कड़ी है।

---

मूल:

<md-form-field>2.0.0-beta.10 में पेश किया गया था। बदलाव का प्रलेखन से नीचे देखें:

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

यहाँ CHANGELOG पूरा करने के लिए एक कड़ी है।

<md-form-field> चयनकर्ता का उपयोग करने के लिए, सुनिश्चित करें कि आपके पास सामग्री स्थापित संस्करण 2.0.0-beta.10 है। इसके अलावा, आप आप AppModule आयात में MdFormFieldModule मॉड्यूल आयात करने की आवश्यकता:

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

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

जो कोई भी इस सवाल पर ठोकर के लिए, यहाँ StackBlitz पर working demo करने के लिए एक कड़ी है।

Answer 2

आप इस तरह MD-इनपुट-कंटेनर का उपयोग कर सकते हैं:

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

Answer 3

आप फ़ाइलें आयात तो बस आप आयात करना एक पद्धति हो सकता है कठिनाइयों पा रहे हैं तो।

अपने .component.ts

और अपने मॉड्यूल .module में विशिष्ट मॉड्यूल आयात में

पहले आयात किसी भी आवश्यक घटक।ts

और फिर यह आयात में जोड़ने में @NgModule ({ imports : [ <Example>Module ] })

उदाहरण आप केवल आपके कोणीय आवेदन

1) में formcontrols आयात करना चाहते हैं। app.component.ts

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

2)।

@NgModule ({ imports : [ FormsModule ] })