Angular Material Form 控件示例无法运行

Question

我正在尝试使用 Angular Material FormControl 来验证控件。为了学习此控件，我使用 Angular Material 网站上的代码示例（带有错误消息的输入示例位于https://v8.material.angular.io/components/input/examples）。我正在看一个使用 Angular Material v8.2.3 的示例。

该示例的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 的变量，并且我没有对示例代码进行任何导致任何功能不起作用的更改。

有人使用过这个示例中使用的表单控件吗？如果是这样，我在这里缺少什么？你是如何让这个机制发挥作用的？

Answer 1

您必须在包含此组件的模块中导入 ReactiveFormsModule。也许你错过了。

Answer 2

您是否在应用程序模块中导入了表单模块？