우리는 회사에서 자체 양식 필드 구성 요소를 구축하려고합니다. 우리는 다음과 같이 머티리얼 디자인의 컴포넌트를 감싸려고합니다.

들:

<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이 포함되어 있어야합니다"라는 메시지 가 나타납니다. 이것은 matInput-field를 직접 포함하지 않는 mat-form-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을 가져 왔는지 확인하십시오. 양식 필드 컨트롤 역할을 할 수있는 다른 구성 요소에는, 및 사용자가 만든 사용자 지정 양식 필드 컨트롤이 있습니다.

당신이 가지고있는 경우에도 발생할 수 매트 형태의 필드 내에서 적절한 입력을 하지만, 그것은을 가지고 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>

또 다른 해결책은에 의해 제안 MostangIf 이동 *에 대한 : 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. 리 액티브 폼 모듈

처음 두 가지는 앵귤러 머티리얼입니다. Angular Material을 처음 접하는 많은 사람들은 본능적으로 이들 중 하나를 발견하게 될 것이며 폼을 구축하는 데 두 가지가 모두 필요하다는 것을 깨닫지 못할 것입니다.

그래서 그들 사이의 차이점은 무엇입니까?

MatFormFieldModule은 Angular Material이 사용할 수있는 모든 다른 유형의 폼 필드를 포함합니다. 이것은 일반적으로 폼 필드를위한 고급 모듈에 가깝지만 MatInputModule은 선택 상자, 라디오 버튼 등과 달리 '입력'필드 유형을위한 것입니다.

위 목록의 세 번째 항목은 Angular의 Reactive Forms Module입니다. Reactive Forms Module은 수많은 앵귤러 러브를 담당합니다. Angular를 사용하려면 Angular Docs를 읽는 데 시간을 보내는 것이 좋습니다. 그들은 당신의 모든 대답을 가지고 있습니다. 응용 프로그램 작성은 거의 양식을 포함하지 않으며, 종종 응용 프로그램에 반응성 양식이 포함됩니다. 따라서이 두 페이지를 읽으십시오.

각도 문서 : 반응 형

Angular Docs : 리 액티브 폼 모듈

첫 번째 문서 인 'Reactive Forms'는 시작할 때 가장 강력한 무기가되고 두 ​​번째 문서는 Angular Reactive Forms의 고급 응용 프로그램을 사용할 때 가장 강력한 무기가됩니다.

이것을 사용하는 구성 요소가 아닌 구성 요소의 모듈로 직접 가져와야 함을 기억하십시오. 올바르게 기억한다면 Angular 2에서 기본 앱 모듈에서 Angular Material 모듈의 전체 세트를 가져온 다음 가져옵니다. 각 구성 요소에 직접 필요했습니다. 현재 방법은 몇 가지만 사용하는 경우 Angular Material 모듈 전체를 가져 오기 때문에 훨씬 효율적인 IMO입니다.

이것이 Angular Material을 사용하여 양식을 작성하는 데 약간의 통찰력을 제공하기를 바랍니다.

위의 모든 주요 코드 구조 / 구성 답변으로 문제가 해결되지 않으면 확인해야 할 사항이 하나 더 있습니다. 어떻게 든 무효화되지 않았는지 확인하십시오 <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을 구현 / 제공 할 수 있습니다.

실수로 매트를 제거했습니다입력 필드에서 지시문을 하여 동일한 오류가 발생했습니다.

예.

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

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>

matInput 입력 태그에 지시문 이 누락 되었습니다.

MatInputModule을 app.module.ts 파일로 가져와야합니다.

'@ angular / material'에서 {MatInputModule} 가져 오기;

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 태그 안에 appearance = "fill"을 설정할 수 있습니다.

<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. 중첩 모듈의 경우 구성 요소를 가져올 app.module 또는 module.ts에서 MatFormFieldModule 및 MatInputModule을 가져 왔는지 확인하십시오.
2. 매트 폼 필드에서 재료 버튼 또는 확인란을 감쌀 때. 매트 형태의 필드로 포장 될 수있다 물질 구성 요소 목록을 참조하십시오 매트 형태의 필드를
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>

양식 필드에는 요소가 있어야합니다! (예 : 입력, 텍스트 영역, 선택 등)