angular - mat-form-field חייב להכיל MatFormFieldControl

אנחנו מנסים לבנות רכיבי שדות-טופס משלהם בחברה שלנו. אנחנו מנסים לעטוף את רכיבי עיצוב החומרים ככה:

שדה :

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

אבל אני מקבל "mat-form-field חייב להכיל MatFormFieldControl" בקונסולה. אני מניח שזה קשור לכך ש-mat-form-field לא מכיל ישירות שדה matInput. אבל הוא כן מכיל אותו, זה רק בתוך ההקרנה של ng-content.

הנה בליץ: https://stackblitz.com/edit/angular-xpvwzf

תשובה #1

היו לי בעיה מאוד דומה; ייבאתי את MatFormFieldModule במודול הראשי שלי אך שכחתי להוסיף את MatInputModule למערך ה-imports, כך:

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";


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

מידע נוסף כאן.

תשובה #2

בעיה 1: MatInputModule לא יובא

ייבא MatInputModule ו-MatFormFieldModule בתוך המודול כלומר app.module.ts

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

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

בעיה 2: matInput - טעות באיות/שכח להוסיף

ודאו להוסיף matInput וזה רגיש לאותיות.

<mat-form-field>
    <input matInput type="text" />
</mat-form-field>

בעיה 3: מיקום *ngIf או @if לא חוקי

בדוק שאין לך שום תנאי על תגית input שיהיה שקרי בכל מקרה כי mat-form-field מחפש matInput בתוכו. במקום זאת, שים *ngIf על תגית mat-form-field.

<mat-form-field>
   <input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>

קרדיט ל-@William Herrmann על שציין את הבעיה הזאת#3

בעיה 4: הקומפיילר עדיין נותן שגיאה

אם קומפיילר של Angular עדיין נותן שגיאה לאחר תיקון הבעיות שניתנו למעלה, אז עליך לנסות להפעיל מחדש את האפליקציה.

ng serve

תשובה #3

ייבא את MatInputModule בקובץ module.ts שלך וזה יפתור את הבעיה.

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

ההצהרה שאחריה היא התשובה הישנה.

לצערנו, שיגור תוכן לתוך mat-form-field עדיין אינו נתמך. נא לעקוב אחרי נושא ה-GitHub הבא כדי לקבל את החדשות האחרונות לגבי זה.

בשלב זה הפתרון היחיד עבורך הוא או להכניס את התוכן שלך ישירות לתוך רכיב mat-form-field או לממש מחלקת MatFormFieldControl וכך ליצור רכיב שדה טופס מותאם אישית.

תשובה #4

אם מישהו נתקל בשגיאה הזו לאחר שניסה לקנן <mat-checkbox>, היו שמחים! זה לא עובד בתוך תג <mat-form-field>.

תשובה #5

זה יכול לקרות גם אם יש לך קלט תקין בתוך mat-form-field, אבל יש לו 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: הזזת *ngIf עבור mat-form-field:

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

תשובה #6

ציטוט מהתיעוד הרשמי כאן:

שגיאה: mat-form-field חייב לכלול MatFormFieldControl

שגיאה זו מתרחשת כאשר לא הוספת בקר שדה טופס לשדה הטופס שלך. אם שדה הטופס שלך מכיל אלמנט <input> או <textarea> מקורי, ודא שהוספת לו את ההוראה matInput וייבאת את MatInputModule. רכיבים אחרים שיכולים לשמש כבקר שדה טופס כוללים <mat-select>, <mat-chip-list>, וכל בקרי שדה טופס מותאמים אישית שיצרת.

למידע נוסף על יצירת "בקר שדה טופס מותאם" כאן

תשובה #7

גם לי היה את הבעיה הזו, ויש לי את האלמנט <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>

תשובה #8

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



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

תשובה #9

זה אומר שאתה לא מייבא את MatInputModule כמו

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

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

תשובה #10

אם מישהו מנסה להכניס <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>