mat-form-field में MatFormFieldControl होना चाहिए

Question

हम अपनी कंपनी में अपने फॉर्म-फील्ड-कंपोनेंट्स बनाने की कोशिश कर रहे हैं। हम इस तरह सामग्री डिजाइन के घटकों को लपेटने की कोशिश कर रहे हैं:

मैदान:

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

पाठ बॉक्स:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

उपयोग:

<textbox value="test" hint="my hint"></textbox>

इसका परिणाम लगभग यही है:

    <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
       <field>
          <mat-form-field class="mat-input-container mat-form-field>
             <div class="mat-input-wrapper mat-form-field-wrapper">
                <div class="mat-input-flex mat-form-field-flex">
                   <div class="mat-input-infix mat-form-field-infix">
                      <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
                      <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
                   </div>
                </div>
                <div class="mat-input-underline mat-form-field-underline">
                   <span class="mat-input-ripple mat-form-field-ripple"></span>
                </div>
                <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
             </div>
          </mat-form-field>
       </field>
    </textbox>

लेकिन मुझे कंसोल में "मैट-फॉर्म-फील्ड होना चाहिए, जिसमें एक MatFormFieldControl" होना चाहिए । मुझे लगता है कि यह मैट-फॉर्म-फील्ड के साथ करना है जिसमें सीधे मैटइन्पुट-फ़ील्ड नहीं है। लेकिन यह यह युक्त है, यह सिर्फ एनजी-कंटेंट प्रोजेक्शन को रोक रहा है।

यहाँ एक ब्लिट्ज है: https://stackblitz.com/edit/angular-xpvwzf

Comments

क्या आपने कभी इस मुद्दे को हल किया? मुझे ठीक वैसी ही समस्या हो रही है। उत्तर प्रासंगिक नहीं हैं।

— सुन्न

नहीं दुर्भाग्य से नहीं :/। मुझे यह मिला: github.com/angular/material2/issues/9411 और अगर मैं इसे सही ढंग से समझूं तो यह असमर्थित है।

— विक्टर एरिकसन

ठीक है .. धन्यवाद, मैंने एक घटक बनाया जो बस सभी संकेतों और मान्यताओं को लपेटता है और इनपुट तत्व के तहत रखा जाता है।

— सुन्न

@ViktorEriksson यदि मेरा उत्तर आपके लिए उपयोगी था, तो क्या आप इसे स्वीकार करने की परवाह करते हैं?

— Darksoulsong

मुझे खेद है, लेकिन यह उपयोगी नहीं था, मेरे सवाल का उस जवाब के साथ बहुत कम है।

— विक्टर एरिकसन

Answer 1

दुर्भाग्य से मैट-फॉर्म-फील्ड में कंटेंट प्रोजेक्शन अभी तक समर्थित नहीं है। कृपया इसके बारे में नवीनतम समाचार प्राप्त करने के लिए निम्नलिखित गीथूब मुद्दे पर नज़र रखें ।

अब तक आपके लिए एकमात्र समाधान या तो अपनी सामग्री को सीधे मैट-फॉर्म-फील्ड घटक में रखना है या एक MatFormFieldControl वर्ग को लागू करना है, जिससे एक कस्टम फॉर्म फ़ील्ड घटक बन जाता है।

Comments

मुझे यह प्रश्न एक त्रुटि संदेश के रूप में आया। नीचे इस सवाल का जवाब करते हुए कहा कि MatInputModuleजरूरतों को आयात करने के लिए मेरी समस्या हल। चूंकि यह स्वीकृत उत्तर है, मैं यहां लिंक जोड़ रहा हूं, उम्मीद है कि यह अन्य समय बचाएगा।

— CGFoX

मेरी समस्या यह थी कि मैंने ' फॉर्ममॉडल ' के आयात की उपेक्षा की थी । मुझे उम्मीद है इससे किसी को सहायता मिलेगी।

— लेरेनाउ

@CGFoX तुम बिलकुल सही हो यार !! MatInputModule का आयात करने से मेरी समस्या हल हो गई !!

— रफीक मोहम्मद

इसके अलावा एक <mat-form-field>टैग के अंदर आपको यह सुनिश्चित करना होगा कि आपने matInputहर inputटैग या विशेषता को सही ढंग से जोड़ा है या matNativeControlहर पर विशेषता है<select>

— svassr

@CGFoX काश वे इस जानकारी और बेहतर उदाहरणों के साथ दस्तावेज़ को अपडेट करते ...

Answer 2

मेरे पास यह मुद्दा था। मैं आयातित MatFormFieldModuleमेरी मुख्य मॉड्यूल में, लेकिन जोड़ने के लिए भूल गया MatInputModuleके लिए importsतो जैसे सरणी,:

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

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

आशा करता हूँ की ये काम करेगा।

अधिक जानकारी यहाँ ।

Comments

इसके अलावा एक के अंदर <mat-form-field>टैग आप यह सुनिश्चित करना है कि आप सही ढंग से जोड़ा matInputहर पर विशेषता inputया टैग या matNativeControlहर पर विशेषता <select>टैग

— svassr

धन्यवाद। मेरी समस्या का समाधान किया। मैं कोणीय सामग्री के लिए नया हूँ। ऐसा लगता है कि मुझे कोणीय सामग्री का उपयोग करने के लिए कई, कई मॉड्यूल आयात करने की आवश्यकता है। उदाहरण के लिए, हमें बटन का उपयोग करने के लिए "MatButtonModule" को आयात करने की आवश्यकता है, चेकबॉक्स का उपयोग करने के लिए "MatCheckboxModule", "MatFormFieldModule" का उपयोग करने के लिए रूपों, "MatInputModule" इनपुट का उपयोग करने के लिए ... यह वास्तव में थकाऊ है। क्या एक या दो बार आयात करने का कोई तरीका है और फिर हम किसी भी अधिक चिंता के बिना कोणीय सामग्री का उपयोग शुरू कर सकते हैं?

— विलियम होउ

महत्वपूर्ण: आदेश मायने रखता है!

— बेकारियो सीनियर जूल

मेरे लिए काम नहीं करता है, मैं सिर्फ इस उदाहरण का इस्तेमाल किया: material.angular.io/compenders/stepper/overview

— tatsu

इसने मेरे लिए काम किया import { MatInputModule } from '@angular/material/input':

— जारेड व्हिपल

Answer 3

समाधान 1 - आयात MatInputModule

MatInputModuleमॉड्यूल के अंदर आयात यानीapp.module.ts

कोणीय 9+

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

कोणीय 9 से नीचे

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

@NgModule({
  imports: [
     // .......
     MatInputModule
     // .......
  ]
})
export class AppModule { }

समाधान 2 - वर्तनी गलतियाँ

जोड़ना सुनिश्चित करें matInputऔर यह केस-संवेदी है।

<input matInput type="text" />

Comments

आह यह मुझे पागल कर रहा था। कारण एक ने मेरे लिए काम किया। मुझे लगता है कि प्रलेखन में निर्दिष्ट किया जाना चाहिए, भले ही यह अब स्पष्ट लगता है।

— Feign

मुझे इस मुद्दे का सामना करना पड़ा जब इनपुट स्टेटमेंट से "matInput" गायब था।

— हदीदअली

Answer 4

यहां आधिकारिक दस्तावेज से उद्धरण :

त्रुटि: mat-form-field में MatFormFieldControl होना चाहिए

यह त्रुटि तब होती है जब आपने अपने प्रपत्र फ़ील्ड में प्रपत्र फ़ील्ड नियंत्रण नहीं जोड़ा होता है। यदि आपके प्रपत्र फ़ील्ड में कोई मूल या तत्व है, तो सुनिश्चित करें कि आपने इसमें matInput निर्देश जोड़ा है और MatInputModule को आयात किया है। अन्य घटक जो प्रपत्र फ़ील्ड नियंत्रण के रूप में कार्य कर सकते हैं, और आपके द्वारा बनाए गए किसी भी कस्टम प्रपत्र फ़ील्ड नियंत्रण में शामिल हैं।

Answer 5

यह तब भी हो सकता है जब आपके पास मैट-फॉर्म-फ़ील्ड के भीतर एक उचित इनपुट हो , लेकिन इसके पास एक ngIfहै। उदाहरण के लिए:

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

मेरे मामले में, mat-chip-listइसका डेटा लोड होने के बाद ही "दिखाई" देना चाहिए। हालाँकि, सत्यापन किया जाता है और mat-form-fieldसाथ शिकायत करता है

mat-form-field में MatFormFieldControl होना चाहिए

इसे ठीक करने के लिए, नियंत्रण होना चाहिए, इसलिए मैंने उपयोग किया है [hidden]:

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

---

इसके द्वारा एक वैकल्पिक समाधान प्रस्तावित किया जाता है Mosta: इसके लिए आगे बढ़ें mat-form-field:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Comments

मुझे बस इसी तरह की समस्या थी, मैंने इसे कुछ इसी तरह से तय किया जैसा आप कह रहे हैं। तुम मेरे अपवित्र हो!

— एलेक्स

धन्यवाद, आप छिपे हुए का उपयोग करने के बजाय पूरे मैट-फॉर्म-फील्ड टैग पर ngIf कंडीशन को स्थानांतरित कर सकते हैं

— मोस्टा

Answer 6

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



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})

Comments

Stackoverflow में आपका स्वागत है। प्रश्नों के उत्तर देते समय, कृपया कुछ स्पष्टीकरण जोड़ें कि आपका कोड स्निपेट क्या करता है और यह ओपी के प्रश्न को हल क्यों करता है। अधिक जानकारी के लिए यहां देखें कैसे उत्तर दें

— जेन्सन

Answer 7

मुझे यकीन नहीं है कि अगर यह सरल हो सकता है, लेकिन मेरे पास एक ही मुद्दा था, "मैट-इनपुट" को इनपुट क्षेत्र में "matInput" में बदलकर समस्या का समाधान किया गया। आपके मामले में मुझे "matinput" दिखाई दे रहा है और यह मेरे ऐप को उसी त्रुटि को फेंकने का कारण बना रहा है।

<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">

"Matinput"

"MatInput"

Comments

हम्म सुनिश्चित नहीं है, आपने उत्पन्न आउटपुट को चिपकाया है। वास्तविक कोड में यह पहले से ही matInput है, यदि आप "टेक्स्टबॉक्स-सेक्शन" देखते हैं। मुझे कोई समस्या नहीं है जब यह सिर्फ सामग्री का उपयोग करते हुए काम करता है, तो इसके प्रक्षेपण के साथ अपनी खुद की रचना करने की कोशिश करने पर यह काम करना बंद कर देता है। मेरे प्लंकर को समस्याएँ लगती हैं, उम्मीद है कि यह दिन के दौरान खुद को ठीक कर लेगा।

— विक्टर एरिकसन

ओह, मैं देख रहा हूँ, मेरा बुरा। यह एक लंबा शॉट था। मैं देख सकता हूँ कि क्या कोई वास्तव में सही दुबला कोण के साथ आ सकता है, मैं इस मुद्दे पर उत्सुक हूं।

— रिटर्नटेबल

यह मेरे साथ हुआ, मैं बदलना भूल mdInputगया matInput।

— इब्राहीम अल्राबी '

कोणीय 5: matInputइसके बजाय <इनपुट> टैग विशेषता होनी चाहिए mat-input।

— स्टैवम

Answer 8

अगर किसी ने घोंसला बनाने की कोशिश के बाद इस त्रुटि के साथ फंस गया <mat-checkbox>, तो अच्छा हो! यह एक <mat-form-field>टैग के अंदर काम नहीं करता है ।

Answer 9

अगर किसी को नीचे की तरह <mat-radio-group>अंदर घोंसला बनाने की कोशिश कर रहा है <mat-form-field>, तो आपको यह त्रुटि मिलेगी

         <mat-form-field>
                <!-- <mat-label>Image Position</mat-label> -->
                <mat-radio-group aria-label="Image Position" [(ngModel)]="section.field_1">
                    <mat-radio-button value="left">Left</mat-radio-button>
                    <mat-radio-button value="right">Right</mat-radio-button>
                </mat-radio-group>
            </mat-form-field>

मूल <mat-form-field>टैग हटाएं

Comments

मैं इस मुद्दे पर था, और इस तरह की बात के साथ मार्कअप का एक टुकड़ा था। निकाला जा रहा है mat-form-fieldबनाया मुद्दा मेरे लिए चले जाओ।

— एंड्रयू ग्रे

क्या कोई ऐसा कारण है जो <mat-form-field>इसके अंदर रेडियो समूह का समर्थन नहीं करता है? मैं इस मुद्दे को भी कर रहा था और सिर्फ मैट फॉर्म फील्ड टैग को हटाने के लिए नहीं सोचा था क्योंकि ऐसा नहीं लगता था कि ऐसा करना उचित होगा क्योंकि इतने सारे सामग्री यूआई फॉर्म उदाहरणों का उपयोग करते हैं <mat-form-field>। मेरे पास प्रपत्रों के लिए सभी विभिन्न सामग्री फॉर्म इनपुट मॉड्यूल हैं, मेरे app.module.ts में परिभाषित कई अन्य उत्तर संदर्भों की तरह ड्रॉपडाउन और रेडियो समूहों का चयन करें।

— एलेक्स

मुझे नहीं beleve .... मैं काम करने के लिए सब कुछ और कुछ भी नहीं की कोशिश कर सकते हैं .... और बाद दर्द के कुछ ही दिनों मैं यह इतना सरल समाधान मिला ... धन्यवाद आप संभोग

— Arter

Answer 10

मेरे पास यह मुद्दा भी था, और <mat-select>मेरे टेम्पलेट में तत्व है, जब मैं मॉड्यूल में MatSelectModule को आयात करता हूं, तो यह काम करता है, यह विज्ञान नहीं बनाता है, लेकिन आशा है कि यह आपकी मदद कर सकता है।

import { MatSelectModule } from '@angular/material/select';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
],

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

Comments

यह मॉड्यूल को आयात किए बिना काम करता है मैट-फॉर्म-फील्ड नियंत्रण समझ में नहीं आता है कि मैट-चयन क्या है। जब इसे आयात किया जाता है तो यह सभी सूचनाओं को ठीक कर सकता है और इसलिए आगे की त्रुटि के बिना टेम्पलेट को पार्स कर सकता है।

— पीटर्स

Answer 11

दुर्भाग्य से मैं कुछ पहले से ही अच्छे उत्तरों पर टिप्पणी नहीं कर सकता क्योंकि मेरे पास अभी तक एसओ अंक नहीं हैं, हालांकि, 3 प्रमुख मॉड्यूल हैं जो आपको यह सुनिश्चित करने की आवश्यकता होगी कि आप अपने घटक के मूल मॉड्यूल में आयात कर रहे हैं, एक तरफ से क्या। आपको सीधे अपने घटक में आयात करना होगा। मैं उन्हें संक्षेप में साझा करना चाहता था और उन पर प्रकाश डालता था।

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

पहले दो कोणीय सामग्री के लिए हैं। एंगुलर मटीरियल के लिए बहुत सारे लोग सहज रूप से इनमें से एक के पार आएंगे और यह महसूस नहीं करेंगे कि फॉर्म बनाने के लिए दोनों की आवश्यकता होती है।

तो उनके बीच क्या अंतर है?

MatFormFieldModule में उन सभी विभिन्न प्रकार के प्रपत्र फ़ील्ड शामिल हैं जो कोणीय सामग्री उपलब्ध हैं। यह सामान्य रूप से फॉर्म फ़ील्ड के लिए उच्च स्तर के मॉड्यूल का अधिक है, जबकि MatInputModule विशेष रूप से 'इनपुट' फ़ील्ड प्रकारों के लिए है, जैसे कि बक्से, रेडियो बटन, आदि का चयन करने के लिए।

उपरोक्त सूची में तीसरा आइटम एंगुलर का रिएक्टिव फॉर्म मॉड्यूल है। रिएक्टिव फॉर्म्स मॉड्यूल एक टन अंडर-द-हूड कोणीय प्रेम के लिए जिम्मेदार है। यदि आप कोणीय के साथ काम करने जा रहे हैं, तो मैं अत्यधिक अनुशंसा करता हूं कि आप कोणीय डॉक्स पढ़ने में कुछ समय बिताएं। उनके पास आपके सभी उत्तर हैं। बिल्डिंग एप्लिकेशन शायद ही कभी फॉर्म में शामिल नहीं होते हैं, और अधिक बार नहीं, आपके आवेदन में प्रतिक्रियात्मक रूप शामिल होंगे। इस कारण से, कृपया इन दो पृष्ठों को पढ़ने के लिए समय निकालें।

कोणीय डॉक्स: प्रतिक्रियाशील रूप

कोणीय डॉक्स: प्रतिक्रियाशील रूप मॉड्यूल

पहला डॉक 'रिएक्टिव फॉर्म' आपका सबसे शक्तिशाली हथियार होगा जैसा कि आप शुरू करते हैं, और दूसरा डॉक्टर आपका सबसे शक्तिशाली हथियार होगा जैसा कि आप कोणीय रिएक्टिव फॉर्म के अधिक उन्नत अनुप्रयोगों को प्राप्त करते हैं।

याद रखें, ये सीधे आपके घटक के मॉड्यूल में आयात किए जाने की आवश्यकता है, न कि जिस घटक में आप उनका उपयोग कर रहे हैं। यदि मुझे सही ढंग से याद है, तो कोणीय 2 में, हमने अपने मुख्य ऐप मॉड्यूल में कोणीय सामग्री मॉड्यूल के पूरे सेट को आयात किया, और फिर क्या आयात किया हमें अपने प्रत्येक घटक में सीधे जरूरत थी। वर्तमान विधि बहुत अधिक कुशल IMO है क्योंकि हम केवल कुछ ही का उपयोग करने पर कोणीय सामग्री मॉड्यूल के पूरे सेट को आयात करने की गारंटी देते हैं।

मुझे उम्मीद है कि यह कोणीय सामग्री के साथ निर्माण रूपों में थोड़ा और अंतर्दृष्टि प्रदान करता है।

Answer 12

यदि उपरोक्त सभी मुख्य कोड संरचना / कॉन्फ़िगरेशन उत्तर आपकी समस्या का समाधान नहीं करते हैं, तो यहां एक और बात की जाँच करें: सुनिश्चित करें कि आपने किसी तरह से अपने अमान्य नहीं किया है <input> टैग ।

उदाहरण के लिए, मुझे mat-form-field must contain a MatFormFieldControlगलती से स्व-समापन स्लैश के बाद एक requiredविशेषता डालने के बाद एक ही त्रुटि संदेश मिला /, जिसने मुझे प्रभावी रूप से अमान्य कर दिया <input/>। दूसरे शब्दों में, मैंने ऐसा किया था (इनपुट टैग विशेषताओं का अंत देखें):

गलत :

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

सही :

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

यदि आप उस गलती या कुछ और को अपने अमान्य करने के लिए करते हैं <input>, तो आपको mat-form-field must contain a MatFormFieldControlत्रुटि मिल सकती है । वैसे भी, यह केवल एक और बात है कि आप डिबगिंग कर रहे हैं।

Answer 13

यदि आपके पास मेरे मामले में एकमात्र तत्व के रूप में एक चटाई के भीतर एक चटाई स्लाइड है तो वही त्रुटि हो सकती है

 <mat-form-field>
    <mat-slide-toggle [(ngModel)]="myvar">
       Some Text
     </mat-slide-toggle>
 </mat-form-field>

यह हो सकता है यदि आपके पास <mat-form-field> सरल समाधान के भीतर कई विशेषताएं थीं , तो स्लाइड टॉगल को रूट पर ले जाना था

Comments

इससे मेरी जान बच गई। धन्यवाद।

— पौलो पेड्रोसो

Answer 14

आप इस मार्गदर्शिका का पालन ​​करने और अपने स्वयं के MatFormFieldControl को लागू करने / प्रदान करने का प्रयास कर सकते हैं

Answer 15

मैंने गलती से इनपुट क्षेत्र से matInput निर्देश हटा दिया था जो उसी त्रुटि का कारण बना।

जैसे।

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

निश्चित कोड

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

Answer 16

MatRadioModule MatFormField के अंदर काम नहीं करेगा। डॉक्स का कहना है

यह त्रुटि तब होती है जब आपने अपने प्रपत्र फ़ील्ड में प्रपत्र फ़ील्ड नियंत्रण नहीं जोड़ा होता है। यदि आपके प्रपत्र फ़ील्ड में कोई मूल या तत्व है, तो सुनिश्चित करें कि आपने इसमें matInput निर्देश जोड़ा है और MatInputModule को आयात किया है। अन्य घटक जो प्रपत्र फ़ील्ड नियंत्रण के रूप में कार्य कर सकते हैं, उनमें <mat-select>, <mat-chip-list> और कोई भी कस्टम प्रपत्र फ़ील्ड नियंत्रण शामिल नहीं होते हैं।

Answer 17

मेरे मामले में, "onChanges ()" के लिए मेरे समापन कोष्ठक में से एक इनपुट तत्व से चूक गए थे और इस प्रकार इनपुट तत्व को स्पष्ट रूप से प्रस्तुत नहीं किया जा रहा था:

<input mat-menu-item 
      matInput type="text" 
      [formControl]="myFormControl"
      (ngModelChange)="onChanged()>

Answer 18

एक आंशिक समाधान एक कस्टम घटक में सामग्री फार्म क्षेत्र को लपेटने और लागू करने के लिए है ControlValueAccessor पर इंटरफ़ेस को करना है। सामग्री प्रक्षेपण के अलावा प्रभाव बहुत अधिक है।

पूरा उदाहरण देखेंStackblitz पर ।

मैं FormControl( लेकिन प्रतिक्रियाशील रूपों ) का उपयोग अंदर याCustomInputComponentFormGroupFormArray अगर आप एक अधिक जटिल रूप तत्व की जरूरत भी काम करना चाहिए।

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="outline" floatLabel="always" color="primary">
    <mat-label>First name</mat-label>
    <input matInput placeholder="First name" formControlName="firstName" required>
    <mat-hint>Fill in first name.</mat-hint>
    <mat-error *ngIf="firstNameControl.invalid && (firstNameControl.dirty || firstNameControl.touched)">
      <span *ngIf="firstNameControl.hasError('required')">
        You must fill in the first name.
      </span>
    </mat-error>
  </mat-form-field>

  <custom-input
    formControlName="lastName"
    [errorMessages]="errorMessagesForCustomInput"
    [hint]="'Fill in last name.'"
    [label]="'Last name'"
    [isRequired]="true"
    [placeholder]="'Last name'"
    [validators]="validatorsForCustomInput">
  </custom-input>

  <button mat-flat-button
    color="primary"
    type="submit"
    [disabled]="form.invalid || form.pending">
    Submit
  </button>

</form>

कस्टम input.component.html

<mat-form-field appearance="outline" floatLabel="always" color="primary">
  <mat-label>{{ label }}</mat-label>

  <input
    matInput
    [placeholder]="placeholder"
    [required]="isRequired"
    [formControl]="customControl"
    (blur)="onTouched()"
    (input)="onChange($event.target.value)">
  <mat-hint>{{ hint }}</mat-hint>

  <mat-error *ngIf="customControl.invalid && (customControl.dirty || customControl.touched)">
    <ng-container *ngFor="let error of errorMessages">
    <span *ngFor="let item of error | keyvalue">
      <span *ngIf="customControl.hasError(item.key)">
        {{ item.value }}
      </span>
    </span>
    </ng-container>
  </mat-error>
</mat-form-field>

Answer 19

आप matInput अपने इनपुट टैग में निर्देशन से चूक गए हैं ।

Answer 20

आपको अपने app.module.ts फ़ाइल में MatInputModule आयात करने की आवश्यकता है

'@ कोणीय / सामग्री' से {MatInputModule} आयात करें;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CustomerPage } from './components/customer/customer';
import { CustomerDetailsPage } from "./components/customer-details/customer-details";
import { CustomerManagementPageRoutingModule } from './customer-management-routing.module';
import { MatAutocompleteModule } from '@angular/material/autocomplete'
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CustomerManagementPageRoutingModule,
    MatAutocompleteModule,
    MatInputModule,
    ReactiveFormsModule,
    MatFormFieldModule
  ],

Answer 21

आप अपने मैट-फॉर्म-फील्ड टैग के अंदर उपस्थिति "भर" सेट कर सकते हैं, यह मेरे लिए काम करता है

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Username Or Email</mat-label>
    <input matInput placeholder="Username Or Email" type="text">
  </mat-form-field>

  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Password</mat-label>
    <input matInput placeholder="Password" type="password">
  </mat-form-field>
</form>

Comments

इससे मेरा मुद्दा ठीक हो गया। क्या आप कृपया बता सकते हैं कि appearence = "fill"यहाँ क्या है

— IamGrooot

Answer 22

कोणीय 9+ ... सामग्री 9+

मैंने देखा है कि 3 गलतियाँ एक ही त्रुटि को जन्म दे सकती हैं:

1. सुनिश्चित करें कि आपने Mat.mormFieldModule और MatInputModule को app.module या मॉड्यूल में आयात किया है। जहां आपके घटक आयात किए जा रहे हैं (नेस्टेड मॉड्यूल के मामले में)
2. जब आप मैट-फॉर्म-फील्ड में सामग्री बटन या चेकबॉक्स लपेटते हैं। सामग्री घटकों की सूची देखें जिन्हें मैट-फॉर्म-फील्ड मैट-फॉर्म-फील्ड के साथ लपेटा जा सकता है
3. जब आप अपने टैग में matInput को शामिल करने में विफल होते हैं। यानी <इनपुट matInput प्रकार = "संख्या" चरण = "0.01" फ़ॉर्मControlName = "मूल्य" />

Answer 23

मेरे मामले में मैंने इसे बदल दिया है:

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

इसके लिए:

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

इनपुट टैग में matInput निर्देश जोड़ना मेरे लिए यह त्रुटि तय की गई थी।

Answer 24

आप MatInputModule को आयात करने से चूक गए होंगे

Answer 25

घटक .ts फ़ाइल में प्रदाताओं का उपयोग करें

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})

Answer 26

नया अद्यतन MatInput मॉड्यूल आयात है:

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

कोणीय सामग्री एपीआई के अनुसार

Answer 27

नोट कुछ समय त्रुटि तब होती है, जब हम सबमिट बटन के आसपास "मैट-फॉर्म-फील्ड" टैग का उपयोग करते हैं:

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

तो कृपया इस टैग का उपयोग सबमिट बटन के आसपास न करें

Answer 28

मेरा भी यही मुद्दा था

मुद्दा आसान है

केवल आपको अपनी परियोजना के लिए दो मॉड्यूल आयात करने होंगे

MatFormFieldModule MatInputModule

Answer 29

मैं तत्व के रूप में टिप्पणी के कारण एक ही मुद्दा हो रहा था।

<mat-form-field>
    <mat-label>Database</mat-label>
    <!-- <mat-select>
        <mat-option *ngFor="let q of queries" [value]="q.id">
            {{q.name}}
        </mat-option>
    </mat-select>  -->
</mat-form-field>

फार्म फ़ील्ड में तत्व होना चाहिए! (उदाहरण के लिए इनपुट, टेक्सारिया, सिलेक्ट, आदि)