Can't bind to 'validationMessage' since it isn't a known property of 'mdc-text-field'

[yalesnikov]

Hi, I tried to import TextField to my project and I had error.

I imported MdcTextFieldModule and added it to the import array into NgModule

my-module.ts

...
import { MdcFormFieldModule } from '@angular-mdc/web/form-field';
import { MdcTextFieldModule } from '@angular-mdc/web/textfield';
...

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MdcFormFieldModule,
    MdcTextFieldModule,
    ...
  ], 

I used a validationMessage directive in html. I added this directive into mdc-text-field.

my-component.html

<form [formGroup]="demoForm" (ngSubmit)="submit(demoForm)">
 <mdc-form-field>
  <mdc-text-field 
    formControlName="username" 
    label="Username" 
    outlined
    [errorStateMatcher]="matcher"
    [validationMessage]="validationMessage"
    ></mdc-text-field>
 </mdc-form-field>
 <button mdc-button type="submit">Submit</button>
</form>

I used methods from example at official your site: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/text-field/examples

my-component.ts

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
import { ErrorStateMatcher } from '@angular-mdc/web/form-field/typings/error-state-matcher';

export class APErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  templateUrl: './my-component.html'
})
export class MyComponent implements OnInit {
  matcher = new APErrorStateMatcher();
  demoForm: FormGroup;

  ngOnInit(): void {
    this.demoForm = new FormGroup({
      username: new FormControl(
        { value: null, disabled: false },
        [Validators.required, Validators.minLength(3), Validators.maxLength(11)]
      )
    });
  }

  get validationMessage(): string {
    if (this.demoForm.controls['username'].hasError('minlength')) {
      return 'Username is not long enough';
    } else if (this.demoForm.controls['username'].hasError('maxlength')) {
      return 'Username is max length is 11';
    } else if (this.demoForm.controls['username'].hasError('required')) {
      return 'Field is required';
    }
    return undefined;
  }

  submit(f: NgForm | FormGroup) {
    if (f.invalid) { return; }
  }

But I had error:
Can't bind to 'validationMessage' since it isn't a known property of 'mdc-text-field'

I thought that your documentation is not full and I did not imported this directive or I incorrect imported textfiled. Can you help me please?

[guilhermetod]

It seems the documentation and examples were updated before release. They're on 6.0.0 while release is on 5.1.1

Check out the examples available during last release https://github.com/trimox/angular-mdc-web/tree/fe306e0b2320e1a0dee131ef132949bd583f8835/demos/src/app/components.

In your case, you should use the following:

<mdc-form-field>
  <mdc-text-field 
    formControlName="username" 
    label="Username" 
    outlined
    [errorStateMatcher]="matcher"
    >
  </mdc-text-field>
    <mdc-helper-text validation>{{validationMessage}}</mdc-helper-text->
</mdc-form-field>