Угловой материал - mdInput в MatInputModule?

#angular #angular-material

#угловой #угловой материал #угловой материал2

Вопрос:

Что я использую

Угловой
Угловой материал ^2.0.0-бета.12

Что я делаю

Я только что начал новый проект и установил материал
При копировании некоторого синтаксиса из предыдущего проекта я получаю сообщение об ошибке при попытке импорта

‘импортировать { MdInputModule} из ‘@angular/material’;

После копания в типизациях, похоже, что теперь оно изменено на ‘MatInputModule’
Я обновил свой модуль, чтобы использовать ‘MatInputModule’
Теперь HTML выдает ошибку

‘md-form-field’ не является известным элементом:

При этом используется синтаксис, предоставленный с веб-сайта material

HTML

 <form [formGroup]="albumEdit">
  <md-form-field>
    <input mdInput formControlName="albumTitle" placeholder="Album Title">
  </md-form-field>
</form>

Вопросы

Я упускаю что-то очевидное здесь?
Каков наилучший способ реализации компонентов материала в последней сборке?
Есть ли какая-то официальная документация, которую я пропускаю?

Ответ №1:

С тех пор 2.0.0-beta.12 , Md префикс был удален в пользу Mat префикса. Смотрите этот СПИСОК ИЗМЕНЕНИЙ:

Критические изменения Все префиксы «md» были удалены.Измените md префикс на mat :

В вашем машинописном тексте,

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

и в тебе шаблон:

 <mat-form-field>
    <input matInput formControlName="albumTitle" placeholder="Album Title">
</mat-form-field>

Документация на веб-сайте устарела и нуждается в обновлении с mat префиксом.

1. Спасибо @Faisal за быстрый ответ! Это здорово. Он удаляет все ошибки. Однако теперь это простое поле ввода, без анимации, без подсветки, без заполнителя и т.д. Я включаю ‘import { BrowserAnimationsModule } from ‘@angular /platform-browser / animations» в свой модуль.

2. Хм…. согласно журналу изменений, angular должен быть на уровне 4.4.3. Я установил Angular Cli только на прошлой неделе. И это в ^ 4.2.4.

3. обновите по крайней мере до 4.4.3

4. Глупый вопрос, немного новый для этого. Это случай ручного изменения package.json? (Еще раз спасибо Фейсалу)

5. Вам также необходимо включить тему материала. Посмотрите эту демонстрацию, в ней есть все, что вам нужно 😉 stackblitz.com/edit/ng-mat-beta-11-mj4jym?file=app /…

Ответ №2:

Для angular 8

импортируйте {MatInputModule} из ‘@angular/material/input’;

1. По какой-то причине мне пришлось ввести все это в VSCode, автоматическое завершение, похоже, не улавливает это :/

2. Да, у меня была такая же проблема с автоматическим завершением

Ответ №3:

да, для angular 8 (версий), как сказал нам наш коллега Ашу. не забудьте ввести в последнем предложении.

импортируйте { MatInputModule } из ‘@angular/material/input’

импортирует [MatInputModule]

Спасибо Ашу!

pd. ссылка есть…

https://material.angular.io/components/input/api