Şirketimizde kendi form-alan-Bileşenlerimizi oluşturmaya çalışıyoruz. Malzeme tasarımının Bileşenlerini şu şekilde sarmaya çalışıyoruz:

alan:

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

Metin kutusu:

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

Kullanımı:

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

Bu yaklaşık olarak şu sonuca varır:

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

Ama ben "mat-form-field bir MatFormFieldControl içermelidir" konsolunda alıyorum . Bu doğrudan bir matInput-alanı içermeyen mat-form-alanı ile ilgili sanırım. Ama onu içeriyor, sadece ng-içerik projeksiyonu ile.

İşte bir yıldırım: https://stackblitz.com/edit/angular-xpvwzf

Ne yazık ki, mat-form alanına içerik projeksiyonu henüz desteklenmemektedir. Bu konuda en son haberleri almak için lütfen aşağıdaki github sorununu takip edin .

Şimdiye kadar sizin için tek çözüm, içeriğinizi doğrudan mat-form-field bileşenine yerleştirmek veya bir MatFormFieldControl sınıfı uygulamak ve böylece özel bir form alanı bileşeni oluşturmaktır.

Bu sorunu yaşadım. Ben ithal MatFormFieldModulebenim ana modülüne ama eklemeyi unuttuğu MatInputModuleiçin importsşöyle, dizideki:

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

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

Umarım yardımcı olur.

Daha fazla bilgi burada .

Çözüm 1 - MatInputModule'ü içe aktarın

MatInputModulemodülün içine içe aktarma yaniapp.module.ts

Açısal 9+

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

Açısal 9'un Altında

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

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

Çözüm 2 - Yazım Hatalı

Eklediğinizden emin olun matInputve büyük / küçük harfe duyarlıdır.

<input matInput type="text" />

Buradaki resmi belgelerden alıntı :

Hata: mat-form-field bir MatFormFieldControl içermelidir

Bu hata, form alanınıza bir form alanı denetimi eklemediğinizde oluşur. Form alanınız yerel veya öğe içeriyorsa, ona matInput yönergesini eklediğinizden ve MatInputModule'u içe aktardığınızdan emin olun. Form alanı denetimi olarak işlev görebilen diğer bileşenler ve oluşturduğunuz özel form alanı denetimleri içerir.

Bu, bir mat-form-alanında uygun bir girdiniz varsa da olabilir , ancak ngIfüzerinde bir açıklık vardır. Örneğin:

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

Benim durumumda, mat-chip-listancak verileri yüklendikten sonra "görünmesi" gerekiyordu. Ancak, doğrulama gerçekleştirilir ve mat-form-fieldşikayetlerde

mat-form-field bir MatFormFieldControl içermelidir

Düzeltmek için kontrol orada olmalı, bu yüzden kullandım [hidden]:

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

Alternatif bir çözüm öneren Mosta: move * ngIf for 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
    ]
})

Bu basit olabilir emin değilim ama aynı sorunu vardı, "mat-giriş" giriş alanında "matInput" değiştirmek sorunu çözdü. Senin durumunda "matinput" görüyorum ve bu benim app aynı hatayı atmasına neden oluyor.

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

Birisi yuvalama denedikten sonra kimse bu hata ile sıkışmış varsa <mat-checkbox>, iyi tezahürat olmak! Bir <mat-form-field>etiketin içinde çalışmaz .

Herkes aşağıdaki gibi bir <mat-radio-group>iç içe içmeye çalışıyorsanız <mat-form-field>, bu hatayı alırsınız

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

üst <mat-form-field>etiketleri kaldır

Ben de bu sorunu vardı, ve <mat-select>benim şablonda MatSelectModule Modül içine aldığımda, öğe var, işe yarıyor, bilim yapmaz, ama stil size yardımcı olabilir umuyoruz.

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>

Ne yazık ki, henüz SO puanları olmadığım için zaten iyi olan bazı cevaplar hakkında yorum yapamam, ancak, bileşeninizin ana modülüne içe aktardığınızdan emin olmanız gereken 3 anahtar modül var. doğrudan bileşeninize aktarmanız gerekir. Onları kısaca paylaşmak ve yaptıklarını vurgulamak istedim.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

İlk ikisi Açısal Malzeme içindir. Açısal Malzemeye yeni gelen birçok insan içgüdüsel olarak bunlardan biriyle karşılaşacak ve bir form oluşturmanın her ikisini de gerektirdiğinin farkında olmayacaktır.

Peki aralarındaki fark nedir?

MatFormFieldModule, Açısal Malzemenin sahip olduğu tüm farklı form alanlarını kapsar. Bu, genel olarak form alanları için daha üst düzey bir modüldür, oysa MatInputModule, seçim kutularının, radyo düğmelerinin vs. aksine, özellikle 'giriş' alan türleri içindir.

Yukarıdaki listedeki üçüncü madde Angular'ın Reaktif Formlar Modülü'dür. Reaktif Formlar Modülü, bir ton kaput altı Açısal aşktan sorumludur. Angular ile çalışacaksanız, Angular Docs'u okumak için biraz zaman ayırmanızı tavsiye ederim. Tüm cevaplarınız var. Uygulama oluşturmak nadiren formları İÇERMEZ ve çoğunlukla uygulamanız reaktif formları içerecektir. Bu nedenle, lütfen bu iki sayfayı okumak için zaman ayırın.

Açısal Belgeler: Reaktif Formlar

Açısal Belgeler: Reaktif Formlar Modülü

İlk doküman 'Reaktif Formlar', başlarken en güçlü silahınız olacak ve ikinci doktor, Açısal Reaktif Formların daha gelişmiş uygulamalarına geçtiğinizde en güçlü silahınız olacak.

Bunların, kullandığınız bileşene değil, doğrudan bileşeninizin modülüne aktarılması gerektiğini unutmayın. Doğru hatırlıyorsam, Açısal 2'de, ana uygulama modülümüzdeki tüm Açısal Malzeme modülleri kümesini içe aktardık ve ardından bileşenlerin her birinde doğrudan ihtiyacımız vardı. Mevcut yöntem çok daha verimli IMO'dur, çünkü sadece birkaç tanesini kullanırsak tüm Açısal Malzeme modüllerini içe aktarmamız garanti edilir.

Umarım bu, Açısal Malzeme ile bina formları hakkında biraz daha fazla bilgi sağlar.

Yukarıdaki ana kod yapısı / yapılandırma yanıtlarının tümü sorununuzu çözmezse, kontrol etmeniz gereken bir şey daha var: <input>etiketinizi bir şekilde geçersiz kılmadığınızdan emin olun .

Örneğin, kendiliğinden kapanan bir eğik çizgiden sonra bir özniteliği mat-form-field must contain a MatFormFieldControlyanlışlıkla koyduktan sonra aynı hata iletisini aldım ve bu da etkin bir şekilde geçersiz kıldı . Başka bir deyişle, bunu yaptım (giriş etiketi niteliklerinin sonuna bakın):required/<input/>

yanlış :

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

doğru :

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

Bu hatayı veya başka bir şeyi geçersiz kılmak için <input>yaparsanız, mat-form-field must contain a MatFormFieldControlhatayı alabilirsiniz . Her neyse, bu hata ayıklama yaparken aramak için sadece bir şey daha var.

Aynı hata, benim durumumda sahip olduğum tek öğeyle alandan bir hasır içinde bir mat slayt varsa oluşabilir

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

<mat-form-field> Basit çözüm içinde birkaç özniteliğiniz varsa , bu, slayt geçişini kök dizinine taşımak

Bu kılavuzu izlemeyi deneyebilir ve kendi MatFormFieldControl'ünüzü uygulayabilir / sağlayabilirsiniz.

Yanlışlıkla matInput'u kaldırmıştım aynı hataya neden olan giriş alanından yönergesini .

Örneğin.

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

sabit kod

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

MatRadioModule, MatFormField içinde çalışmaz. dokümanlar demek

Bu hata, form alanınıza bir form alanı denetimi eklemediğinizde oluşur. Form alanınız yerel veya öğe içeriyorsa, ona matInput yönergesini eklediğinizden ve MatInputModule'u içe aktardığınızdan emin olun. Form alanı denetimi olarak işlev görebilen diğer bileşenler arasında <mat-select>, <mat-chip-list> ve oluşturduğunuz özel form alanı denetimleri bulunur.

Benim durumumda, "onChanges ()" için kapanış parantezimden biri giriş öğesinde kaçırıldı ve bu nedenle giriş öğesi görünüşte hiç oluşturulmadı:

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

Kısmi bir çözüm, malzeme formu alanını özel bir bileşene sarmak ve ControlValueAccessorarabirimi üzerine uygulamaktır . İçerik projeksiyonunun yanı sıra etki hemen hemen aynı.

Stackblitz ile ilgili tüm örneğe bakın .

İçeride FormControl( reaktif formlar ) kullandım, CustomInputComponentancak daha karmaşık bir form öğesine ihtiyacınız varsa FormGroupda FormArrayçalışmalıyım.

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>

özel 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 Giriş etiketinizde yönergeyi kaçırdınız .

MatInputModule uygulamasını app.module.ts dosyanıza almanız gerekir

{MatInputModule} 'i' @ açısal / malzeme 'den içe aktarın;

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

Mat-form-field etiketinizin içine view = "fill" i ayarlayabilirsiniz, bu benim için işe yarar

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

Açısal 9+ ... Malzeme 9+

3 hatanın aynı hataya neden olabileceğini fark ettim:

1. App.module veya module.ts dosyasında MatFormFieldModule ve MatInputModule'u içe aktardığınızdan emin olun (bileşenlerin içe aktarıldığı modüllerde (iç içe modüller durumunda))
2. Mat form alanına malzeme düğmeleri veya onay kutusu sardığınızda. Mat-form-field mat-form-field ile sarılabilen malzeme bileşenleri listesine bakın
3. Etiketine matInput ekleyemediğinizde. ie <input matInput type = "number" step = "0.01" formControlName = "fiyat" />

Benim durumumda bunu değiştirdim:

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

buna:

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

MatInput yönergesini giriş etiketine eklemek, bu hatayı benim için düzeltti.

MatInputModule dosyasını içe aktarmayı kaçırmış olabilirsiniz

component.ts dosyasındaki sağlayıcıları kullanma

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

Yeni güncellenmiş MatInput Modülü içe aktarma işlemi:

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

Uyarınca açısal malzemeler API

Not Gönder düğmesinin çevresinde "mat-form-field" etiketini kullandığımızda bir süre Hata oluşur:

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

Bu etiketi gönder düğmesinin etrafında kullanmayın.

Aynı sorunum vardı

sorun basit

projenize yalnızca iki modül aktarmanız gerekir

MatFormFieldModule MatInputModule

aşağıdaki gibi yorumlanmış öğe nedeniyle aynı sorunu alıyordu.

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

form alanı öğesi olmalı! (örn. girdi, metin alanı, seçim vb.)