CODEWITHSUNDEEP
htmlangulartypescript
Factor Three
Factor Three

Reputation: 2274

Angular Material Form Control Example does not run

I am attempting to use an Angular Material FormControl to validate a control. In order to learn this control, I am using a code example from the Angular Material website (Input with error messages example at https://v8.material.angular.io/components/input/examples). I am looking at an example using v8.2.3 of Angular Material.

The ts code for the example is below:

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,
  ]);
}

and the HTML for the example is below:

<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>

There isn't anything unusual about the contents of the CSS file.

The problem is that the example will not compile and run the program as written. When attempting to compile the example code, I get the following failure:

Can't bind to 'formControl' since it isn't a known property of 'input'.

Obviously, something in this example is either missing or in error. The example does not name any other dependent classes or modules that would support [formControl] as a property, there are no variables named formControl named in the code, and I have made no changes to the example code that would make anything not work.

Has anyone used this form control as it is used in this example? If so, what am I missing here? How did you get this mechanism to work?

Upvotes: 0

Views: 170

Answers (2)

Rishabh Kumar Chaudhary
Rishabh Kumar Chaudhary

Reputation: 161

You have to import ReactiveFormsModule in the module which contains this component. Maybe you missed that.

Upvotes: 2

saleem
saleem

Reputation: 133

Did you import the Forms Module in your app module?

Upvotes: 0

Related Questions