Я пытаюсь использовать Angular Material FormControl для проверки элемента управления. Чтобы изучить этот элемент управления, я использую пример кода с веб-сайта Angular Material (пример ввода с сообщениями об ошибках на https://v8.material.angular.io/components/input/examples). Я смотрю на пример, используя v8.2.3 из Angular Материал.
Код ts для примера ниже:
import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
/**
* @title Input with error messages
*/
@Component({
selector: 'input-errors-example',
templateUrl: 'input-errors-example.html',
styleUrls: ['input-errors-example.css'],
})
export class InputErrorsExample {
emailFormControl = new FormControl('', [
Validators.required,
Validators.email,
]);
}
и HTML для примера ниже :
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" [formControl]="emailFormControl">
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
</form>
В содержимом файла CSS нет ничего необычного.
Проблема в том, что пример не скомпилирует и не запустит программу как написано. При попытке скомпилировать пример кода, я получаю следующую ошибку:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Очевидно, что-то в этом примере отсутствует или содержит ошибку. В примере не указаны никакие другие зависимые классы или модули, которые бы поддерживали [formControl] в качестве свойства, в коде нет переменных с именем formControl, названных в коде, и я не внес изменений в код примера, которые бы не работали.
Кто-нибудь использовал этот элемент управления формы, как он используется в этом примере? Если так, то что мне здесь не хватает? Как вы заставили этот механизм работать?