[angular] mat-form-field는 MatFormFieldControl을 포함해야합니다.

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

들:

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