Angular Материал: поле mat-form-field должно содержать MatFormFieldControl при создании настраиваемого элемента управления поля формы

Question

Я хотел бы реализовать поле пользовательской формы Angular Материал, следуя этому руководству: https://material.angular.io/guide/creating-a-custom-form-field-control

Но у меня продолжает появляться эта ошибка: Ошибка ОШИБКИ: mat-form- поле должно содержать MatFormFieldControl.

Согласно документации :

Эта ошибка возникает, если вы не добавили элемент управления поля формы в поле формы. Если ваше поле формы содержит натив или элемент, убедитесь, что вы добавили в него директиву matInput и импортировали MatInputModule. К другим компонентам, которые могут выступать в качестве элемента управления полем формы, относятся любые пользовательские элементы управления полями формы, созданные вами.

Но добавление директивы matInput к тегам ничего не меняет. Это как слепой, потому что теги встроены в этот новый компонент <example-tel-input>

Поле mat-form-field:

<mat-form-field>
  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matSuffix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>
</mat-form-field>

Компонент с входами:

<div [formGroup]="parts" class="example-tel-input-container">
  <input class="example-tel-input-element" formControlName="area" size="3" aria-label="Area code" (input)="_handleInput()">
  <span class="example-tel-input-spacer">&ndash;</span>
  <input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
  <span class="example-tel-input-spacer">&ndash;</span>
  <input class="example-tel-input-element" formControlName="subscriber" size="4" aria-label="Subscriber number" (input)="_handleInput()">
</div>

Stackblitz: https://stackblitz.com/edit/angular-9fyeha

Чего мне не хватает?

Answer 1

В документации не упоминается тот факт, что вам следует импортировать классы материалов из тех же точек входа , либо

основная точка входа:

приложение .module.ts

import {
  MatIconModule,
  MatFormFieldModule, // it's redundant here since MatInputModule already exports it
  MatInputModule,
  MatSelectModule
} from "@angular/material";

example-tel-input-example.component.ts

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

или

вторичный точки входа:

app.module.ts

import { MatSelectModule } from "@angular/material/select";
import { MatIconModule } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input";

example-tel-input-example.component.ts

import { MatFormFieldControl } from '@angular/material/form-field';

Forked Stackblitz

Почему это так важно?

Потому что для получения контроля над вложенными формами Angular материал использует @ContentChild(MatFormFieldControl) декоратор и MatFormFieldControl класс должны быть из одного пакета, иначе instanceof вернет false

Answer 2

Я добавил скрытый ввод в ваш form-field-custom-control-example.component, и он работал.

<mat-form-field>
  <input matInput style="display:none">
  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matSuffix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>
</mat-form-field>