Kami sedang mencoba membangun Komponen-bidang-bentuk kami sendiri di Perusahaan kami. Kami mencoba untuk membungkus Komponen desain bahan seperti ini:

bidang:

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

kotak teks:

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

Pemakaian:

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

Ini menghasilkan sekitar ini:

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

Tapi saya mendapatkan "mat-form-field harus mengandung MatFormFieldControl" di konsol. Saya kira ini ada hubungannya dengan mat-form-field tidak secara langsung mengandung matInput-field. Tapi itu berisi, hanya dengan proyeksi ng-content.

Berikut ini adalah blitz: https://stackblitz.com/edit/angular-xpvwzf

Sayangnya proyeksi konten ke bidang-mat-form belum didukung. Silakan lacak masalah github berikut untuk mendapatkan berita terbaru tentangnya.

Saat ini satu-satunya solusi bagi Anda adalah menempatkan konten Anda langsung ke komponen bidang bentuk mat atau menerapkan kelas MatFormFieldControl sehingga menciptakan komponen bidang bentuk kustom.

Saya punya masalah ini. Saya mengimpor MatFormFieldModulemodul utama saya, tetapi lupa menambahkan MatInputModuleke importsarray, seperti:

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

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

Semoga ini bisa membantu.

Info lebih lanjut di sini .

Solusi 1 - impor MatInputModule

impor MatInputModulemodul dalam yaituapp.module.ts

Sudut 9+

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

Di Bawah Sudut 9

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

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

Solusi 2 - Kesalahan Ejaan

Pastikan untuk menambahkan matInputdan case-sensitive.

<input matInput type="text" />

Mengutip dari dokumentasi resmi di sini :

Kesalahan: mat-form-field harus mengandung MatFormFieldControl

Kesalahan ini terjadi ketika Anda belum menambahkan kontrol bidang formulir ke bidang formulir Anda. Jika bidang formulir Anda berisi asli atau elemen, pastikan Anda telah menambahkan arahan matInput untuk itu dan telah mengimpor MatInputModule. Komponen lain yang bisa bertindak sebagai kontrol bidang formulir termasuk,, dan kontrol bidang formulir kustom apa pun yang Anda buat.

Ini juga bisa terjadi jika Anda memiliki input yang tepat di dalam bidang-bentuk-mat , tetapi ada ngIfdi dalamnya. Misalnya:

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

Dalam kasus saya, mat-chip-listseharusnya "muncul" hanya setelah datanya dimuat. Namun, validasi dilakukan dan mat-form-fielddikeluhkan

mat-form-field harus mengandung MatFormFieldControl

Untuk memperbaikinya, kontrol harus ada di sana, jadi saya telah menggunakan [hidden]:

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

Solusi alternatif diusulkan oleh Mosta: move * ngIf untuk 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
    ]
})

Saya tidak yakin apakah ini bisa sesederhana ini tetapi saya memiliki masalah yang sama, mengubah "mat-input" menjadi "matInput" di bidang input menyelesaikan masalah. Dalam kasus Anda, saya melihat "matinput" dan itu menyebabkan aplikasi saya melempar kesalahan yang sama.

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

Jika ada yang terjebak dengan kesalahan ini setelah mencoba membuat sarang <mat-checkbox>, jadilah senang! Tidak berfungsi di dalam <mat-form-field>tag.

jika ada yang mencoba membuat sarang <mat-radio-group>di dalam <mat-form-field> seperti di bawah ini, Anda akan mendapatkan kesalahan ini

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

hapus <mat-form-field>tag induk

Saya memiliki masalah ini juga, dan saya memiliki <mat-select>elemen dalam template saya, ketika saya mengimpor MatSelectModule ke Modul, itu berfungsi, itu tidak membuat ilmu pengetahuan, tetapi masih berharap itu dapat membantu Anda.

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>

Sayangnya saya tidak bisa begitu saja mengomentari beberapa jawaban yang sudah baik karena saya belum memiliki poin SO, namun, ada 3 modul utama yang perlu Anda pastikan Anda mengimpor ke modul induk komponen Anda, selain dari apa Anda harus mengimpor ke komponen Anda secara langsung. Saya ingin membagikannya secara singkat dan menyoroti apa yang mereka lakukan.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

Dua yang pertama adalah untuk Bahan Sudut. Banyak orang yang baru mengenal Materi Angular akan secara naluriah menemukan salah satunya dan tidak menyadari bahwa membangun sebuah formulir membutuhkan keduanya.

Jadi apa perbedaan di antara mereka?

MatFormFieldModule mencakup semua jenis bidang formulir yang tersedia untuk Bahan Angular. Ini lebih merupakan modul tingkat tinggi untuk bidang formulir secara umum, sedangkan MatInputModule khusus untuk jenis bidang 'input', sebagai lawan dari kotak pilih, tombol radio, dll.

Item ketiga dalam daftar di atas adalah Modul Bentuk Reaktif Angular. Modul Bentuk Reaktif bertanggung jawab untuk satu ton cinta sudut di bawah tenda. Jika Anda akan bekerja dengan Angular, saya sangat menyarankan Anda meluangkan waktu membaca Angular Docs. Mereka memiliki semua jawaban Anda. Membangun aplikasi jarang TIDAK melibatkan formulir, dan lebih sering daripada tidak, aplikasi Anda akan melibatkan formulir reaktif. Untuk alasan itu, silakan luangkan waktu untuk membaca dua halaman ini.

Dokumen Sudut: Formulir Reaktif

Dokumen Sudut: Modul Formulir Reaktif

Dokumen pertama 'Formulir Reaktif' akan menjadi senjata Anda yang paling kuat saat Anda mulai, dan dokumen kedua akan menjadi senjata paling ampuh saat Anda melanjutkan ke aplikasi yang lebih canggih dari Formulir Reaktif Angular.

Ingat, ini perlu diimpor langsung ke modul komponen Anda, bukan komponen yang Anda gunakan. Jika saya ingat dengan benar, di Angular 2, kami mengimpor seluruh rangkaian modul Bahan Sudut dalam modul aplikasi utama kami, dan kemudian mengimpor apa kami membutuhkan setiap komponen kami secara langsung. Metode saat ini jauh lebih efisien IMO karena kami dijamin akan mengimpor seluruh rangkaian modul Bahan Sudut jika kami hanya menggunakan beberapa dari mereka.

Saya harap ini memberikan sedikit lebih banyak wawasan tentang bentuk bangunan dengan Bahan Angular.

Jika semua jawaban struktur / konfigurasi kode utama di atas tidak menyelesaikan masalah Anda, berikut ini satu hal lagi yang perlu diperiksa: pastikan Anda tidak membatalkan <input>tag Anda .

Sebagai contoh, saya menerima mat-form-field must contain a MatFormFieldControlpesan kesalahan yang sama setelah secara tidak sengaja menempatkan requiredatribut setelah slash yang menutup sendiri /, yang secara efektif membatalkan saya <input/>. Dengan kata lain, saya melakukan ini (lihat bagian akhir atribut tag input):

salah :

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

benar :

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

Jika Anda membuat kesalahan itu atau sesuatu yang lain untuk membatalkan Anda <input>, maka Anda bisa mendapatkan mat-form-field must contain a MatFormFieldControlkesalahan. Bagaimanapun, ini hanya satu hal lagi yang harus dicari ketika Anda sedang melakukan debug.

Kesalahan yang sama dapat terjadi jika Anda memiliki slide tikar di dalam mat dari bidang sebagai satu-satunya elemen dalam kasus saya

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

Ini mungkin terjadi jika Anda memiliki beberapa atribut dalam <mat-form-field> solusi Simple untuk memindahkan toggle slide ke root

Anda dapat mencoba mengikuti panduan ini dan menerapkan / menyediakan MatFormFieldControl Anda sendiri

Saya tidak sengaja menghapus matInput direktif dari bidang input yang menyebabkan kesalahan yang sama.

misalnya.

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

kode tetap

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

MatRadioModule tidak akan berfungsi di dalam MatFormField. The docs mengatakan

Kesalahan ini terjadi ketika Anda belum menambahkan kontrol bidang formulir ke bidang formulir Anda. Jika bidang formulir Anda berisi asli atau elemen, pastikan Anda telah menambahkan arahan matInput untuk itu dan telah mengimpor MatInputModule. Komponen lain yang dapat bertindak sebagai kontrol bidang formulir termasuk <mat-select>, <mat-chip-list>, dan kontrol bidang formulir kustom apa pun yang Anda buat.

Dalam kasus saya, salah satu kurung penutup saya untuk "onChanges ()" tidak ada pada elemen input dan karenanya elemen input tampaknya tidak dirender sama sekali:

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

Solusi parsial adalah membungkus bidang formulir materi dalam komponen khusus dan mengimplementasikan ControlValueAccessorantarmuka di atasnya. Selain proyeksi konten, efeknya hampir sama.

Lihat contoh lengkap di Stackblitz.

Saya menggunakan FormControl( bentuk reaktif ) di dalam CustomInputComponenttetapi FormGroupatau FormArrayharus bekerja juga jika Anda memerlukan elemen bentuk yang lebih kompleks.

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>

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

Anda telah melewatkan matInput arahan dalam tag input Anda.

Anda perlu mengimpor MatInputModule ke file app.module.ts Anda

impor {MatInputModule} dari '@ 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
  ],

Anda dapat mengatur penampilan = "isi" di dalam tag mat-form-field Anda, itu berfungsi untuk saya

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

Sudut 9+ ... Bahan 9+

Saya perhatikan 3 kesalahan dapat memunculkan kesalahan yang sama:

1. Pastikan Anda telah mengimpor MatFormFieldModule dan MatInputModule di app.module atau module.ts di mana komponen Anda diimpor (jika modul bersarang)
2. Ketika Anda membungkus tombol bahan atau kotak centang di bidang mat-form-field. Lihat daftar komponen material yang dapat dibungkus dengan bidang -tikar- bidang -tikar
3. Ketika Anda gagal memasukkan matInput dalam tag Anda. yaitu <input matInput type = "number" step = "0,01" formControlName = "price" />

Impor Modul MatInput yang baru diperbarui adalah:

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

Sesuai API Bahan Sudut

Dalam kasus saya, saya mengubah ini:

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

untuk ini:

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

Menambahkan arahan matInput ke tag input adalah apa yang memperbaiki kesalahan ini untuk saya.

Anda mungkin telah melewatkan impor MatInputModule

menggunakan penyedia di file component.ts

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

Catatan Beberapa waktu Terjadi kesalahan, ketika kami menggunakan tag "mat-form-field" di sekitar tombol kirim seperti:

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

Jadi jangan gunakan tag ini di sekitar tombol kirim

Saya memiliki masalah yang sama

Masalahnya sederhana

hanya Anda yang harus mengimpor dua modul ke proyek Anda

MatFormFieldModule MatInputModule

saya mendapatkan masalah yang sama karena elemen komentar sebagai berikut.

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

bidang formulir harus memiliki elemen! (mis. input, textarea, pilih, dll.)