mat-form-field harus mengandung MatFormFieldControl

189

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

Viktor Eriksson
sumber
3
Apakah Anda pernah menyelesaikan masalah ini? Saya mengalami masalah yang sama persis. Jawabannya tidak relevan.
numsu
Tidak, sayangnya tidak :/. Saya menemukan ini: github.com/angular/material2/issues/9411 dan jika saya mengerti ini dengan benar ini adalah atm yang tidak didukung.
Viktor Eriksson
Ok .. Terima kasih, saya akhirnya membuat komponen yang hanya membungkus semua petunjuk dan validasi dan menempatkannya di bawah elemen input.
numsu
@ ViktorEriksson Jika jawaban saya bermanfaat bagi Anda, apakah Anda mau menerimanya?
darksoulsong
1
Maaf, tapi itu tidak berguna, pertanyaan saya tidak ada hubungannya dengan jawaban itu.
Viktor Eriksson

Jawaban:

28

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.

n.yakovenko
sumber
133
Saya menemukan pertanyaan ini dengan menelusuri pesan kesalahan di Google. The jawaban di bawah ini , menyatakan bahwa MatInputModulekebutuhan akan diimpor memecahkan masalah saya. Karena ini adalah jawaban yang diterima, saya menambahkan tautan di sini, berharap itu akan menghemat waktu orang lain.
CGFoX
4
Masalah saya adalah bahwa saya lalai mengimpor ' FormsModule '. Saya harap ini membantu seseorang.
lerenau
@CGFoX Anda benar-benar benar !! mengimpor MatInputModule memecahkan masalah saya !!
Rafique Mohammed
5
Juga di dalam <mat-form-field>tag Anda harus memastikan Anda menambahkan matInputatribut dengan benar pada setiap inputtag atau atau matNativeControlatribut pada setiap<select>
svassr
1
@CGFoX Saya berharap mereka akan memperbarui dokumentasi dengan informasi ini dan contoh yang lebih baik ...
412

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 .

darksoulsong
sumber
9
Juga di dalam <mat-form-field>tag Anda harus memastikan Anda menambahkan matInputatribut dengan benar pada setiap inputtag atau atau matNativeControlatribut pada setiap <select>tag
svassr
Terima kasih. Memecahkan masalah saya. Saya baru mengenal Material Sudut. Tampaknya saya perlu mengimpor banyak, banyak modul untuk menggunakan Bahan Angular. Sebagai contoh, kita perlu mengimpor "MatButtonModule" untuk menggunakan tombol, "MatCheckboxModule" untuk menggunakan kotak centang, "MatFormFieldModule" untuk menggunakan formulir, "MatInputModule" untuk menggunakan input ... Ini benar-benar melelahkan. Apakah ada cara untuk mengimpor hanya sekali atau dua kali dan kemudian kita bisa mulai menggunakan Bahan Angular tanpa khawatir lagi?
William Hou
1
PENTING: Urusan pemesanan!
Becario Senior
tidak bekerja untuk saya, saya hanya menggunakan contoh ini: material.angular.io/components/stepper/overview
tatsu
Ini berhasil untuk saya import { MatInputModule } from '@angular/material/input':
Jared Whipple
86

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" />
WasiF
sumber
2
Ahh ini membuatku gila. Alasan satu bekerja untuk saya. Saya merasa seperti itu harus ditentukan dalam dokumentasi, meskipun tampaknya sudah jelas sekarang.
Feign
Saya mengalami masalah ini ketika "matInput" hilang dari pernyataan input.
HadidAli
17

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.

pengguna158
sumber
14

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>
Alexei
sumber
Saya hanya punya masalah serupa, saya memperbaikinya dengan sesuatu yang mirip dengan apa yang Anda katakan. Anda memiliki upvote saya!
Alex
3
Terima kasih, alih-alih menggunakan tersembunyi, Anda dapat memindahkan kondisi ngIf pada seluruh tag mat-form-field
Mosta
9
import {MatInputModule} from '@angular/material/input';



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})
Ib Abayomi Alli
sumber
3
Selamat datang di stackoverflow. Saat menjawab pertanyaan, tambahkan beberapa penjelasan tentang apa yang dilakukan cuplikan kode Anda dan mengapa itu memecahkan pertanyaan OP. Untuk info lebih lanjut, periksa di sini Cara Menjawab
Djensen
6

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"

masukkan deskripsi gambar di sini

"matInput"

masukkan deskripsi gambar di sini

ReturnTable
sumber
hmm tidak yakin, Anda telah menempelkan output yang dihasilkan. Dalam kode sebenarnya sudah matInput, jika Anda melihat "textbox-section". Saya tidak punya masalah untuk membuatnya bekerja ketika hanya menggunakan bahan, itu ketika mencoba membuat komponen saya sendiri dengan proyeksi berhenti bekerja. Plunker saya tampaknya mengalami masalah atm, semoga akan memperbaiki sendiri di siang hari.
Viktor Eriksson
Oh, begitu, salahku. Ini adalah pukulan panjang. Saya akan mengikuti untuk melihat apakah ada yang benar-benar dapat datang dengan sudut lean yang benar, saya ingin tahu tentang masalah ini.
ReturnTable
2
Itu terjadi dengan saya, saya lupa untuk perubahan mdInputke matInput.
Ebraheem Alrabee '26
2
Sudut 5: atribut tag <input> seharusnya matInputbukan mat-input.
Stavm
6

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

Mina
sumber
6

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

steve sonius
sumber
Saya mengalami masalah ini, dan memiliki potongan markup dengan hal semacam ini. Menghapus masalah mat-form-fieldmembuat saya pergi.
Andrew Gray
Apakah ada alasan yang <mat-form-field>tidak mendukung grup radio di dalamnya? Saya mengalami masalah ini juga dan tidak berpikir untuk hanya menghapus tag bidang formulir tikar karena sepertinya tidak akan menjadi hal yang tepat untuk dilakukan karena begitu banyak bahan yang digunakan contoh bentuk UI <mat-form-field>. Saya memiliki semua modul input bentuk materi untuk formulir, pilih dropdown dan grup radio yang ditentukan di app.module.ts saya seperti banyak referensi jawaban lainnya.
Alex
Saya tidak dapat percaya .... Saya mencoba segalanya dan tidak ada yang berhasil .... dan setelah beberapa hari kesakitan saya menemukan solusi yang sangat sederhana ini ... terima kasih sobat
Arter
4

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>
user9001817
sumber
Ini berfungsi karena tanpa mengimpor modul kontrol mat-form-field tidak mengerti apa itu mat-select. Ketika diimpor, itu dapat memperbaiki semua informasi dan karena itu dapat mengurai template tanpa kesalahan lebih lanjut.
PeterS
3

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.

pembuat kode lain
sumber
3

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.

cjn
sumber
3

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

Kisinga
sumber
1
Ini menyelamatkan hidupku. Terima kasih.
Paulo Pedroso
2

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

rivanov
sumber
2

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>
Franklin Pious
sumber
2

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.

intotecho
sumber
2

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()>
java-addict301
sumber
2

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>
csg
sumber
2

Anda telah melewatkan matInput arahan dalam tag input Anda.

Isaac Pitwa
sumber
2

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
  ],
Shashwat Gupta
sumber
2

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>
pawan singare
sumber
Ini memperbaiki masalah saya. Bisakah Anda jelaskan apa appearence = "fill"yang dilakukan di sini
IamGrooot
2

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" />
7guyo
sumber
2

Impor Modul MatInput yang baru diperbarui adalah:

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

Sesuai API Bahan Sudut

SaiSurya
sumber
1

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.

Gilmourguru
sumber
1

Anda mungkin telah melewatkan impor MatInputModule

Pranith Baggan
sumber
1

menggunakan penyedia di file component.ts

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

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

M Abdullah
sumber
0

Saya memiliki masalah yang sama

Masalahnya sederhana

hanya Anda yang harus mengimpor dua modul ke proyek Anda

MatFormFieldModule MatInputModule

Fatih Çakıroğlu
sumber
0

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

U_R_Naveen UR_Naveen
sumber