Мы пытаемся создать наши собственные компоненты поля формы в нашей компании. Мы пытаемся обернуть компоненты дизайна материала следующим образом:
поле:
<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» в консоли. Я предполагаю, что это связано с полем mat-form-field, не содержащим непосредственно поле matInput. Но он содержит его, он просто проецирует нг-контент.
angular
angular-material2
Виктор Эрикссон
источник
источник
Ответы:
К сожалению, проекция контента в mat-form-field пока не поддерживается. Пожалуйста, отслеживайте следующую проблему GitHub, чтобы получать последние новости об этом.
К настоящему времени единственное решение для вас - это либо разместить ваш контент непосредственно в компоненте mat-form-field, либо реализовать класс MatFormFieldControl, создав, таким образом, пользовательский компонент поля формы.
источник
MatInputModule
необходимо импортировать решить мою проблему. Поскольку это принятый ответ, я добавляю сюда ссылку, надеясь, что это сэкономит чужое время.<mat-form-field>
тега вы должны убедиться, что вы правильно добавилиmatInput
атрибут для каждогоinput
тега или илиmatNativeControl
атрибута для каждого<select>
У меня была эта проблема. Я импортировал
MatFormFieldModule
в свой основной модуль, но забыл добавитьMatInputModule
вimports
массив, вот так:Надеюсь, поможет.
Больше информации здесь .
источник
<mat-form-field>
тега вы должны убедиться, что вы правильно добавилиmatInput
атрибут для каждогоinput
тега или илиmatNativeControl
атрибута для каждого<select>
тегаimport { MatInputModule } from '@angular/material/input':
Решение 1 - импортировать MatInputModule
импорт
MatInputModule
внутри модуля т.е.app.module.ts
Угловой 9+
Ниже углового 9
Решение 2 - Ошибка правописания
Обязательно добавлю
matInput
и это с учетом регистра.источник
Цитирование из официальной документации здесь :
источник
Это также может произойти, если у вас есть правильный ввод в поле mat-form-field , но оно есть
ngIf
на нем. Например:В моем случае
mat-chip-list
предполагается «появляться» только после загрузки его данных. Тем не менее, проверка выполняется иmat-form-field
жалуется сЧтобы исправить это, контроль должен быть там, поэтому я использовал
[hidden]
:Альтернативное решение предлагает
Mosta
: move * ngIf дляmat-form-field
:источник
источник
Я не уверен, что это может быть так просто, но у меня была та же проблема, изменение «mat-input» на «matInput» в поле ввода решило проблему. В вашем случае я вижу "matinput", и это заставляет мое приложение выдавать ту же ошибку.
"Matinput"
"MatInput"
источник
mdInput
кmatInput
.matInput
вместоmat-input
.Если кто-то застрял с этой ошибкой после попытки вложить
<mat-checkbox>
, будьте добры! Это не работает внутри<mat-form-field>
тега.источник
если кто-то попытается вложить что-
<mat-radio-group>
то<mat-form-field>
подобное ниже, вы получите эту ошибкуудалить родительские
<mat-form-field>
тегиисточник
mat-form-field
сделанного вопроса уйдет за мной.<mat-form-field>
которой радиостанция не поддерживается внутри? У меня тоже была эта проблема, и я не думал просто удалять теги полей формы, потому что не похоже, что это будет правильным решением, так как во многих примерах материалов используется пользовательский интерфейс<mat-form-field>
. У меня есть все различные модули ввода формы материала для форм, выбранные выпадающие списки и группы радиосвязи, определенные в моем app.module.ts, как и многие другие ссылки на ответы.У меня тоже была эта проблема, и у меня есть
<mat-select>
элемент в моем шаблоне, когда я импортирую MatSelectModule в Модуль, он работает, он не делает науку, но все еще надеюсь, что он может помочь вам.источник
К сожалению, я не могу просто прокомментировать некоторые и без того хорошие ответы, так как у меня пока нет точек SO, однако есть 3 ключевых модуля, которые вам понадобятся, чтобы убедиться, что вы импортируете в родительский модуль вашего компонента, помимо того, что Вы должны импортировать в свой компонент напрямую. Я хотел кратко поделиться ими и выделить то, что они делают.
Первые два для углового материала. Многие люди, плохо знакомые с Angular Material, инстинктивно сталкиваются с одним из них и не понимают, что построение формы требует и того, и другого.
Так в чем же разница между ними?
MatFormFieldModule охватывает все различные типы полей формы, которые доступны в Angular Material. Это скорее модуль высокого уровня для полей формы в целом, тогда как MatInputModule специально предназначен для типов полей «ввода», а не для полей выбора, переключателей и т. Д.
Третий элемент в приведенном выше списке - модуль реактивных форм Angular. Модуль Reactive Forms отвечает за тонну скрытой любви. Если вы собираетесь работать с Angular, я настоятельно рекомендую вам потратить некоторое время на чтение Angular Docs. У них есть все ваши ответы. Создание приложений редко НЕ включает формы, и чаще всего ваше приложение будет включать реактивные формы. По этой причине, пожалуйста, найдите время, чтобы прочитать эти две страницы.
Angular Docs: реактивные формы
Angular Docs: модуль реактивных форм
Первый документ «Реактивные формы» станет вашим самым мощным оружием с самого начала, а второй документ станет вашим самым мощным оружием, когда вы перейдете к более сложным приложениям угловых реактивных форм.
Помните, что их нужно импортировать непосредственно в модуль вашего компонента, а не в тот компонент, в котором вы их используете. Если я правильно помню, в Angular 2 мы импортировали весь набор модулей Angular Material в наш основной модуль приложения, а затем импортировали мы нуждались в каждом из наших компонентов напрямую. Текущий метод намного эффективнее IMO, потому что мы гарантированно импортируем весь набор модулей Angular Material, если будем использовать только несколько из них.
Я надеюсь, что это даст немного больше информации о создании форм с помощью Angular Material.
источник
Если все приведенные выше ответы о структуре кода / конфигурации не решают вашу проблему, вот еще одна вещь, которую нужно проверить: убедитесь, что вы каким-то образом не сделали недействительными ваши
<input>
тег .Например, я получил то же
mat-form-field must contain a MatFormFieldControl
сообщение об ошибке после того, как случайно поместилrequired
атрибут после самозакрывающейся косой черты/
, которая фактически аннулировала мою<input/>
. Другими словами, я сделал это (см. Конец атрибутов входного тега):неправильно :
правильно :
Если вы совершите эту ошибку или что-то еще, чтобы лишить вас законной силы
<input>
, вы можете получитьmat-form-field must contain a MatFormFieldControl
ошибку. В любом случае, это еще одна вещь, которую нужно искать во время отладки.источник
Та же самая ошибка может произойти, если у вас есть слайд мата внутри мата из поля, как единственный элемент в моем случае, который я имел
Это может произойти, если у вас есть несколько атрибутов в
<mat-form-field>
Простом решении, чтобы переместить переключатель слайдов в кореньисточник
Вы можете попробовать следовать этому руководству и реализовать / предоставить свой собственный MatFormFieldControl
источник
Я случайно удалил matInput директиву из поля ввода, что вызвало ту же ошибку.
например.
фиксированный код
источник
MatRadioModule не будет работать внутри MatFormField. В документах говорят
источник
В моем случае одна из моих закрывающих скобок для «onChanges ()» была пропущена на элементе input, и, таким образом, элемент input, по-видимому, вообще не отображался:
источник
Частичное решение - обернуть поле формы материала в пользовательский компонент и реализовать
ControlValueAccessor
интерфейс для него. Помимо проекции контента, эффект почти такой же.Смотрите полный пример на Stackblitz.
Я использовал
FormControl
( реактивные формы ) внутри,CustomInputComponent
ноFormGroup
илиFormArray
должен работать тоже, если вам нужен более сложный элемент формы.app.component.html
заказ input.component.html
источник
Вы пропустили
matInput
директиву в своем входном теге.источник
источник
Вы можете установить внешний вид = «заполнить» внутри тега mat-form-field, он работает для меня
источник
appearence = "fill"
здесь происходитУгловой 9+ ... Материал 9+
Я заметил, что 3 ошибки могут привести к одной и той же ошибке:
источник
Новый обновленный модуль импорта MatInput:
Согласно API угловых материалов
источник
В моем случае я изменил это:
к этому:
Добавление директивы matInput к тегу input было тем, что исправило эту ошибку для меня.
источник
Возможно, вы пропустили импорт MatInputModule
источник
использовать провайдеров в файле component.ts
источник
Примечание. Иногда возникает ошибка, когда мы используем тег «mat-form-field» вокруг кнопки отправки, например:
Поэтому, пожалуйста, не используйте этот тег вокруг кнопки отправки
источник
У меня была такая же проблема
вопрос прост
только вы должны импортировать два модуля в ваш проект
MatFormFieldModule MatInputModule
источник
я получил ту же проблему из-за комментария элемента следующим образом.
поле формы должно иметь элемент! (например, ввод, текстовое поле, выделение и т. д.)
источник