เรากำลังพยายามสร้างส่วนประกอบของฟอร์มของเราเองที่ บริษัท ของเรา เราพยายามห่อส่วนประกอบของการออกแบบวัสดุดังนี้:

สนาม:

<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-field โดยตรง แต่มันมีอยู่มันแค่ฉายภาพ ng-content

นี่คือสายฟ้าแลบ: https://stackblitz.com/edit/angular-xpvwzf

น่าเสียดายที่ยังไม่รองรับการฉายเนื้อหาลงใน mat-form-field โปรดติดตามปัญหา GitHubต่อไปนี้เพื่อรับข่าวสารล่าสุดเกี่ยวกับเรื่องนี้

ในตอนนี้ทางออกเดียวสำหรับคุณคือการวางเนื้อหาของคุณลงในคอมโพเนนต์ mat-form-field โดยตรงหรือนำคลาส MatFormFieldControl มาใช้เพื่อสร้างคอมโพเนนต์ฟิลด์ฟอร์มที่กำหนดเอง

ฉันมีปัญหานี้ ฉันนำเข้าMatFormFieldModuleที่โมดูลหลักของฉัน แต่ลืมที่จะเพิ่มMatInputModuleไปยังimportsอาร์เรย์เช่น:

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

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

หวังว่ามันจะช่วย

ข้อมูลเพิ่มเติมที่นี่

โซลูชันที่ 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" />

อ้างจากเอกสารอย่างเป็นทางการที่นี่ :

ข้อผิดพลาด: mat-form-field ต้องมี MatFormFieldControl

ข้อผิดพลาดนี้เกิดขึ้นเมื่อคุณไม่ได้เพิ่มตัวควบคุมเขตข้อมูลฟอร์มลงในเขตข้อมูลฟอร์มของคุณ หากเขตข้อมูลฟอร์มของคุณมีดั้งเดิมหรือองค์ประกอบตรวจสอบให้แน่ใจว่าคุณได้เพิ่มคำสั่ง matInput ลงในนั้นและได้นำเข้า MatInputModule ส่วนประกอบอื่น ๆ ที่สามารถทำหน้าที่เป็นตัวควบคุมเขตข้อมูลฟอร์มรวมถึงและตัวควบคุมเขตข้อมูลฟอร์มแบบกำหนดเองใด ๆ ที่คุณสร้างขึ้น

สิ่งนี้สามารถเกิดขึ้นได้ถ้าคุณมีอินพุตที่เหมาะสมภายใน 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: move * ngIf สำหรับmat-form-field:

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

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



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

ฉันไม่แน่ใจว่ามันอาจจะง่าย แต่ฉันมีปัญหาเดียวกันการเปลี่ยน "mat-input" เป็น "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-checkbox>เป็นกำลังใจดี! มันไม่ทำงานภายใน<mat-form-field>แท็ก

หากใครก็ตามพยายามทำรัง<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>แท็กพาเรนต์

ฉันมีปัญหานี้เช่นกันและฉันมี<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>

น่าเสียดายที่ฉันไม่สามารถแสดงความคิดเห็นกับคำตอบที่ดีอยู่แล้วเนื่องจากฉันยังไม่มีคะแนน SO แต่มี 3 โมดูลหลักที่คุณจะต้องตรวจสอบให้แน่ใจว่าคุณกำลังนำเข้าสู่โมดูลแม่ของส่วนประกอบนอกเหนือจากสิ่งที่ คุณต้องนำเข้าสู่องค์ประกอบของคุณโดยตรง ฉันต้องการแบ่งปันสั้น ๆ และเน้นสิ่งที่พวกเขาทำ

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

สองคนแรกสำหรับวัสดุเชิงมุม ผู้คนจำนวนมากที่เพิ่งเริ่มใช้วัสดุเชิงมุมจะพบกับสิ่งเหล่านี้โดยไม่รู้ตัวว่าการสร้างแบบฟอร์มนั้นต้องการทั้งสองอย่าง

ดังนั้นความแตกต่างระหว่างพวกเขาคืออะไร

MatFormFieldModule ครอบคลุมทุกรูปแบบที่แตกต่างกันของเขตข้อมูลรูปแบบที่วัสดุเชิงมุมมี นี่เป็นโมดูลระดับสูงสำหรับเขตข้อมูลฟอร์มโดยทั่วไปในขณะที่ MatInputModule นั้นใช้สำหรับประเภทฟิลด์ 'อินพุต' โดยเฉพาะเมื่อเทียบกับกล่องที่เลือกปุ่มตัวเลือกและอื่น ๆ

รายการที่สามในรายการด้านบนคือโมดูลฟอร์มปฏิกิริยาของแองกูลาร์ โมดูลฟอร์มปฏิกิริยาโต้ตอบมีหน้าที่รับผิดชอบความรักเชิงมุมมากมาย หากคุณกำลังจะทำงานกับ Angular ฉันขอแนะนำให้คุณใช้เวลาอ่าน Angular Docs พวกเขามีคำตอบทั้งหมดของคุณ การสร้างแอปพลิเคชันไม่ค่อยเกี่ยวข้องกับฟอร์มและบ่อยครั้งกว่าแอปพลิเคชันของคุณจะเกี่ยวข้องกับฟอร์มที่มีปฏิกิริยา ด้วยเหตุนี้โปรดสละเวลาอ่านสองหน้านี้

เอกสารเชิงมุม: แบบฟอร์มที่ตอบโต้

เอกสารเชิงมุม: โมดูลฟอร์มปฏิกิริยา

เอกสารแรก 'แบบฟอร์มที่ตอบโต้' จะเป็นอาวุธที่ทรงพลังที่สุดของคุณเมื่อคุณเริ่มต้นและเอกสารที่สองจะเป็นอาวุธที่ทรงพลังที่สุดของคุณเมื่อคุณเข้าสู่แอปพลิเคชันขั้นสูงของ Angular Reactive Forms

โปรดจำไว้ว่าสิ่งเหล่านี้จำเป็นต้องนำเข้าโดยตรงในโมดูลของส่วนประกอบไม่ใช่ส่วนประกอบที่คุณกำลังใช้หากฉันจำได้อย่างถูกต้องใน Angular 2 เรานำเข้าโมดูล Angular Material ทั้งชุดในโมดูลแอปหลักของเราแล้วนำเข้าสิ่งที่ เราต้องการในแต่ละองค์ประกอบของเราโดยตรง วิธีการปัจจุบันมีประสิทธิภาพมากขึ้น IMO เพราะเรารับประกันว่าจะนำเข้าชุดโมดูลวัสดุเชิงมุมทั้งชุดหากเราใช้เพียงบางส่วนเท่านั้น

ฉันหวังว่าสิ่งนี้จะให้ข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับแบบฟอร์มการสร้างด้วยวัสดุเชิงมุม

หากโครงสร้างรหัสหลัก / คำตอบการกำหนดค่าทั้งหมดด้านบนไม่สามารถแก้ปัญหาของคุณได้นี่เป็นอีกสิ่งหนึ่งในการตรวจสอบ: ตรวจสอบให้แน่ใจว่าคุณไม่ได้ทำให้<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ข้อผิดพลาด อย่างไรก็ตามนี่เป็นอีกหนึ่งสิ่งที่จะมองหาในขณะที่คุณกำลังแก้ไขข้อบกพร่อง

ข้อผิดพลาดเดียวกันนี้สามารถเกิดขึ้นได้หากคุณมีแผ่นสไลด์ที่อยู่ภายในเสื่อจากสนามเป็นองค์ประกอบเดียวในกรณีของฉันฉันมี

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

สิ่งนี้อาจเกิดขึ้นหากคุณมีคุณสมบัติหลายอย่างใน <mat-form-field> วิธีแก้ปัญหาอย่างง่ายคือการเลื่อนสลับสลับไปที่รูท

คุณสามารถลองทำตามคำแนะนำนี้และนำไปใช้ / จัดหา MatFormFieldControl ของคุณเอง

ฉันได้ลบ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>

MatRadioModule จะไม่ทำงานใน MatFormField เอกสารกล่าวว่า

ข้อผิดพลาดนี้เกิดขึ้นเมื่อคุณไม่ได้เพิ่มตัวควบคุมเขตข้อมูลฟอร์มลงในเขตข้อมูลฟอร์มของคุณ หากเขตข้อมูลฟอร์มของคุณมีดั้งเดิมหรือองค์ประกอบตรวจสอบให้แน่ใจว่าคุณได้เพิ่มคำสั่ง matInput ลงในนั้นและได้นำเข้า MatInputModule ส่วนประกอบอื่น ๆ ที่สามารถทำหน้าที่เป็นตัวควบคุมฟิลด์ของฟอร์ม ได้แก่ <mat-select>, <mat-chip-list> และตัวควบคุมฟิลด์ของฟอร์มที่กำหนดเองที่คุณสร้างขึ้น

ในกรณีของฉันมีหนึ่งในวงเล็บปิดของฉันสำหรับ "onChanges ()" ถูกพลาดในองค์ประกอบอินพุตและทำให้องค์ประกอบอินพุตไม่แสดงผลเลย:

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

วิธีแก้ปัญหาบางส่วนคือการห่อฟิลด์แบบฟอร์มวัสดุในองค์ประกอบที่กำหนดเองและใช้ControlValueAccessorอินเตอร์เฟซที่มัน นอกจากการฉายเนื้อหาแล้วเอฟเฟกต์ก็เหมือนกันมาก

ดูตัวอย่างเต็มรูปแบบใน Stackblitz

ฉันใช้FormControl( แบบฟอร์มที่ตอบโต้ ) ภายในCustomInputComponentแต่FormGroupหรือFormArrayควรทำงานด้วยหากคุณต้องการองค์ประกอบแบบฟอร์มที่ซับซ้อนมากขึ้น

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>

คุณพลาดmatInput คำสั่งในแท็กอินพุตของคุณ

คุณต้องนำเข้า MatInputModule ลงในไฟล์ app.module.ts ของคุณ

นำเข้า {MatInputModule} จาก '@ angular / material';

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

คุณสามารถตั้งค่า Appearance = "Fill" ภายในแท็ก mat-form-field ของคุณซึ่งใช้ได้กับฉัน

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

เชิงมุม 9+ ... วัสดุ 9+

ฉันสังเกตเห็น 3 ข้อผิดพลาดสามารถก่อให้เกิดข้อผิดพลาดเดียวกัน:

1. ให้แน่ใจว่าคุณได้นำเข้า MatFormFieldModule และ MatInputModule ใน app.module หรือ module.ts ที่ส่วนประกอบของคุณจะถูกนำเข้า (ในกรณีของโมดูลที่ซ้อนกัน)
2. เมื่อคุณตัดปุ่มวัสดุหรือช่องทำเครื่องหมายในช่องแบบฟอร์มจ้า ดูรายการส่วนประกอบวัสดุที่สามารถห่อด้วยแบบฟอร์มmat- field-field mat-form-field
3. เมื่อคุณไม่ได้รวม matInput ในแท็กของคุณ เช่น <input matInput type = "number" step = "0.01" formControlName = "price" />

ในกรณีของฉันฉันเปลี่ยนสิ่งนี้:

<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 ให้กับแท็กอินพุตเป็นสิ่งที่แก้ไขข้อผิดพลาดนี้ให้ฉัน

คุณอาจพลาดที่จะนำเข้าMatInputModule

ใช้ผู้ให้บริการในไฟล์ component.ts

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

การนำเข้าโมดูล MatInput ที่อัปเดตใหม่คือ:

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

ตามAPI วัสดุเชิงมุม

หมายเหตุ เกิดข้อผิดพลาดบางครั้งเมื่อเราใช้แท็ก "mat-form-field" รอบปุ่มส่งเช่น:

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

ดังนั้นโปรดอย่าใช้แท็กนี้รอบ ๆ ปุ่มส่ง

ฉันมีปัญหาเดียวกัน

ปัญหาง่าย

มีเพียงคุณเท่านั้นที่ต้องนำเข้าสองโมดูลไปยังโครงการของคุณ

MatFormFieldModule MatInputModule

ฉันได้รับปัญหาเดียวกันเนื่องจากองค์ประกอบที่แสดงความคิดเห็นดังนี้

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

ฟิลด์แบบฟอร์มควรมีองค์ประกอบ! (เช่นอินพุตข้อความ textarea เลือก ฯลฯ )