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




angular-material2 (10)

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

खेत:

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

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

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


समाधान 1

MatInputModule अंदर app.module.ts आयात करें

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

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

समाधान २

matInput वर्तनी की जाँच करें, सुनिश्चित करें कि यह केस-संवेदी है

<input matInput type="text" />

MatRadioModule MatFormField के अंदर काम नहीं करेगा। docs कहना है

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


आप इस guide अनुसरण करने और अपने स्वयं के MatFormFieldControl को लागू करने / प्रदान करने का प्रयास कर सकते हैं


ऐसा तब भी हो सकता है जब आपके पास मैट-फॉर्म-फील्ड के भीतर एक उचित इनपुट हो , लेकिन इस पर एक 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 लिए * ngIf ले जाएँ:

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

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

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


मुझे यकीन नहीं है कि अगर यह सरल हो सकता है, लेकिन मेरे पास एक ही मुद्दा था, "मैट-इनपुट" को इनपुट क्षेत्र में "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"


मेरे पास यह मुद्दा भी था, और मेरे टेम्पलेट में <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>

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

<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 निर्देश को जोड़ना मेरे लिए यह त्रुटि तय की गई थी।


मैंने गलती से इनपुट क्षेत्र से 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>

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

उदाहरण के लिए, मुझे वही mat-form-field must contain a MatFormFieldControl स्वयं-समापन स्लैश / बाद गलती से required विशेषता डालने के बाद mat-form-field must contain a MatFormFieldControl त्रुटि संदेश mat-form-field must contain a MatFormFieldControl , जिसने मेरे <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 मिल सकता है mat-form-field must contain a MatFormFieldControl त्रुटि mat-form-field must contain a MatFormFieldControl । वैसे भी, यह केवल एक और बात है कि आप डिबगिंग कर रहे हैं।