Chúng tôi đang cố gắng xây dựng các Thành phần trường mẫu của riêng mình tại Công ty của chúng tôi. Chúng tôi đang cố gắng bọc các thành phần của thiết kế vật liệu như thế này:

cánh đồng:

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

hộp văn bản:

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

Sử dụng:

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

Điều này dẫn đến kết quả này:

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

Nhưng tôi nhận được "mat-form-field phải chứa MatFormFieldControl" trong bảng điều khiển. Tôi đoán điều này có liên quan đến trường mat-form không trực tiếp chứa trường matInput. Nhưng nó có chứa nó, nó chỉ dừng lại với phép chiếu nội dung ng.

Đây là một blitz: https://stackblitz.com/edit/angular-xpvwzf

Thật không may, chiếu nội dung vào trường mat-form-chưa được hỗ trợ. Vui lòng theo dõi vấn đề github sau đây để có được những tin tức mới nhất về nó.

Cho đến bây giờ, giải pháp duy nhất cho bạn là đặt nội dung của bạn trực tiếp vào thành phần trường mẫu-mat hoặc triển khai lớp MatFormFieldControl do đó tạo ra thành phần trường biểu mẫu tùy chỉnh.

Tôi đã có vấn đề này. Tôi đã nhập MatFormFieldModuletại mô-đun chính của mình, nhưng quên thêm MatInputModulevào importsmảng, như vậy:

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

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

Hy vọng nó giúp.

Thêm thông tin ở đây .

Giải pháp 1 - nhập MatInputModule

nhập khẩu MatInputModulebên trong mô-đun tức làapp.module.ts

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

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

Giải pháp 2 - Lỗi chính tả

Hãy chắc chắn để thêm matInputvà nó là trường hợp nhạy cảm.

<input matInput type="text" />

Trích dẫn từ các tài liệu chính thức ở đây :

Lỗi: mat-form-field phải chứa MatFormFieldControl

Lỗi này xảy ra khi bạn chưa thêm điều khiển trường biểu mẫu vào trường biểu mẫu của bạn. Nếu trường biểu mẫu của bạn chứa một phần tử gốc hoặc phần tử, hãy đảm bảo bạn đã thêm lệnh matInput vào nó và đã nhập MatInputModule. Các thành phần khác có thể hoạt động như một điều khiển trường biểu mẫu bao gồm và bất kỳ điều khiển trường biểu mẫu tùy chỉnh nào bạn đã tạo.

Điều này cũng có thể xảy ra nếu bạn có một đầu vào thích hợp trong trường mẫu mat , nhưng nó có một đầu ngIfvào. Ví dụ:

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

Trong trường hợp của tôi, mat-chip-listđược cho là "xuất hiện" chỉ sau khi dữ liệu của nó được tải. Tuy nhiên, xác nhận được thực hiện và mat-form-fieldkhiếu nại với

mat-form-field phải chứa MatFormFieldControl

Để sửa nó, điều khiển phải ở đó, vì vậy tôi đã sử dụng [hidden]:

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

Một giải pháp thay thế được đề xuất bằng cách Mosta: di chuyển * ngNếu cho 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
    ]
})

Tôi không chắc liệu nó có thể đơn giản như vậy không nhưng tôi có cùng một vấn đề, việc thay đổi "mat-input" thành "matInput" trong trường đầu vào đã giải quyết vấn đề. Trong trường hợp của bạn, tôi thấy "matinput" và nó khiến ứng dụng của tôi gặp lỗi tương tự.

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

Nếu bất cứ ai bị mắc kẹt với lỗi này sau khi cố gắng làm tổ a <mat-checkbox>, hãy vui lên! Nó không hoạt động trong một <mat-form-field>thẻ.

Nếu bất cứ ai đang cố gắng lồng <mat-radio-group>vào bên trong <mat-form-field> như bên dưới, bạn sẽ gặp lỗi này

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

xóa các <mat-form-field>thẻ cha

Tôi cũng gặp vấn đề này và tôi có <mat-select>yếu tố trong mẫu của mình, khi tôi nhập MatSelectModule vào Mô-đun, nó hoạt động, nó không tạo ra khoa học, nhưng vẫn hy vọng nó có thể giúp bạn.

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>

Thật không may, tôi không thể nhận xét về một số câu trả lời đã tốt vì tôi chưa có điểm SO, tuy nhiên, có 3 mô-đun chính mà bạn cần đảm bảo rằng bạn đang nhập vào mô-đun mẹ của thành phần, ngoài những gì bạn phải nhập trực tiếp vào thành phần của bạn. Tôi muốn chia sẻ ngắn gọn về họ và làm nổi bật những gì họ làm.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

Hai cái đầu tiên là cho Vật liệu góc. Rất nhiều người mới sử dụng Angular Material theo bản năng sẽ bắt gặp một trong những điều này và không nhận ra rằng việc xây dựng một hình thức đòi hỏi cả hai.

Vậy sự khác biệt giữa chúng là gì?

MatFormFieldModule bao gồm tất cả các loại trường biểu mẫu khác nhau mà Vật liệu góc có sẵn. Đây là nhiều hơn một mô-đun cấp cao cho các trường biểu mẫu nói chung, trong khi MatInputModule dành riêng cho các loại trường 'đầu vào', trái ngược với các hộp chọn, nút radio, v.v.

Mục thứ ba trong danh sách trên là Mô-đun phản ứng của Angular. Mô-đun Reactive Forms chịu trách nhiệm cho một tấn tình yêu Angular dưới vỏ bọc. Nếu bạn đang làm việc với Angular, tôi khuyên bạn nên dành thời gian đọc Angular Docs. Họ có tất cả các câu trả lời của bạn. Xây dựng các ứng dụng hiếm khi KHÔNG liên quan đến các biểu mẫu và thường xuyên hơn không, ứng dụng của bạn sẽ liên quan đến các hình thức phản ứng. Vì lý do đó, xin vui lòng dành thời gian để đọc hai trang này.

Tài liệu góc: Các hình thức phản ứng

Tài liệu góc: Mô đun phản ứng

Tài liệu đầu tiên Forms Các hình thức phản ứng 'sẽ là vũ khí mạnh nhất của bạn khi bạn bắt đầu và tài liệu thứ hai sẽ là vũ khí mạnh nhất của bạn khi bạn tiếp cận với các ứng dụng tiên tiến hơn của Hình thức phản ứng góc.

Hãy nhớ rằng, những thứ này cần được nhập trực tiếp vào mô-đun thành phần của bạn chứ không phải thành phần bạn đang sử dụng chúng. Nếu tôi nhớ chính xác, trong Angular 2, chúng tôi đã nhập toàn bộ bộ mô-đun Vật liệu góc trong mô-đun ứng dụng chính của chúng tôi, sau đó nhập những gì chúng tôi cần trong mỗi thành phần của chúng tôi trực tiếp. Phương pháp hiện tại là IMO hiệu quả hơn nhiều vì chúng tôi được đảm bảo nhập toàn bộ bộ mô-đun Vật liệu góc nếu chúng tôi chỉ sử dụng một vài trong số chúng.

Tôi hy vọng điều này cung cấp một chút cái nhìn sâu sắc hơn về các hình thức xây dựng với Vật liệu góc.

Nếu tất cả các câu trả lời cấu hình / cấu trúc mã chính ở trên không giải quyết được vấn đề của bạn, thì đây là một điều nữa cần kiểm tra: đảm bảo rằng bạn không có cách nào đó vô hiệu hóa <input> thẻ .

Chẳng hạn, tôi đã nhận được mat-form-field must contain a MatFormFieldControlthông báo lỗi tương tự sau khi vô tình đặt một requiredthuộc tính sau dấu gạch chéo tự đóng /, điều này làm mất hiệu lực của tôi <input/>. Nói cách khác, tôi đã làm điều này (xem phần cuối của các thuộc tính thẻ đầu vào):

sai :

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

phải :

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

Nếu bạn phạm sai lầm đó hoặc một cái gì đó khác để vô hiệu hóa của bạn <input>, thì bạn có thể nhận được mat-form-field must contain a MatFormFieldControllỗi. Dù sao, đây chỉ là một điều nữa để tìm kiếm khi bạn gỡ lỗi.

Lỗi tương tự có thể xảy ra nếu bạn có một slide mat trong một mat từ trường là phần tử duy nhất trong trường hợp của tôi, tôi đã có

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

Điều này có thể xảy ra nếu bạn có một số thuộc tính trong <mat-form-field> giải pháp Đơn giản là di chuyển slide chuyển sang gốc

Bạn có thể thử làm theo hướng dẫn này và thực hiện / cung cấp MatFormFieldControl của riêng bạn

Tôi đã vô tình xóa matInput chỉ thị khỏi trường đầu vào gây ra lỗi tương tự.

ví dụ.

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

mã cố định

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

MatRadioModule sẽ không hoạt động trong MatFormField. Các tài liệu nói

Lỗi này xảy ra khi bạn chưa thêm điều khiển trường biểu mẫu vào trường biểu mẫu của bạn. Nếu trường biểu mẫu của bạn chứa một phần tử gốc hoặc phần tử, hãy đảm bảo bạn đã thêm lệnh matInput vào nó và đã nhập MatInputModule. Các thành phần khác có thể hoạt động như một điều khiển trường biểu mẫu bao gồm <mat-select>, <mat-chip-list> và bất kỳ điều khiển trường biểu mẫu tùy chỉnh nào bạn đã tạo.

Trong trường hợp của tôi, một trong những dấu ngoặc đơn đóng của tôi cho "onChanges ()" đã bị bỏ sót trên phần tử đầu vào và do đó phần tử đầu vào rõ ràng không được hiển thị:

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

Một giải pháp một phần là bọc trường mẫu vật liệu trong một thành phần tùy chỉnh và thực hiện ControlValueAccessorgiao diện trên nó. Bên cạnh nội dung chiếu hiệu ứng là khá nhiều như nhau.

Xem ví dụ đầy đủ trên Stackblitz.

Tôi đã sử dụng FormControl( các hình thức phản ứng ) bên trong CustomInputComponentnhưng FormGrouphoặc FormArraycũng nên hoạt động nếu bạn cần một yếu tố hình thức phức tạp hơn.

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>

Bạn đã bỏ lỡ matInput chỉ thị trong thẻ đầu vào của bạn.

Bạn cần nhập MatInputModule vào tệp app.module.ts của bạn

nhập {MatInputModule} từ '@ angular / liệu';

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

Bạn có thể đặt ngoại hình = "điền" vào thẻ mat-form-field, nó hoạt động với tôi

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

Góc 9+ ... Chất liệu 9+

Tôi đã nhận thấy 3 sai lầm có thể dẫn đến cùng một lỗi:

1. Đảm bảo bạn đã nhập MatFormFieldModule và MatInputModule trong app.module hoặc module.ts nơi các thành phần của bạn đang được nhập (trong trường hợp các mô đun lồng nhau)
2. Khi bạn bọc các nút vật liệu hoặc hộp kiểm trong trường mẫu. Xem danh sách các thành phần vật liệu có thể được bọc bằng trường mat-form- mat
3. Khi bạn không bao gồm matInput trong thẻ của bạn. tức là <input matInput type = "number" step = "0.01" formControlName = "price" />

Trong trường hợp của tôi, tôi đã thay đổi điều này:

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

đến đây:

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

Thêm chỉ thị matInput vào thẻ đầu vào là điều đã khắc phục lỗi này đối với tôi.

Bạn có thể đã bỏ lỡ để nhập MatInputModule

Lưu ý Một số lỗi xảy ra khi chúng tôi sử dụng thẻ "mat-form-field" xung quanh nút gửi như:

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

Vì vậy, vui lòng không sử dụng thẻ này xung quanh nút gửi

sử dụng các nhà cung cấp trong tập tin thành phần

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

Nhập mô-đun MatInput cập nhật mới là:

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

Theo API vật liệu góc

Tôi đã có vấn đề tương tự

vấn đề rất đơn giản

chỉ có bạn phải nhập hai mô-đun vào dự án của bạn

MatFormFieldModule MatInputModule

tôi đã nhận được cùng một vấn đề do yếu tố bình luận như sau.

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

trường mẫu nên có yếu tố! (ví dụ: đầu vào, textarea, chọn, v.v.)