angular-university / angular-material-course

Angular Material In Depth
https://angular-university.io/course/angular-material-course
MIT License
497 stars 448 forks source link

Form field validators not working in lesson on Material Input Field #50

Closed spopida closed 2 years ago

spopida commented 2 years ago

Spent a long time scratching head over this one...in the lesson called "Angular Material Input Field: Lots Of Useful Options" the <mat-error> directive isn't working. The problem occurs around 11 mins and 20 seconds in the video.

Here's the my code:

import {Component} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';

@Component({
  selector: "create-course-step-1",
  templateUrl:"create-course-step-1.component.html",
  styleUrls: ["create-course-step-1.component.scss"]
})
export class CreateCourseStep1Component {

  form = this.fb.group({
    title: ['', [
      Validators.required,
      Validators.minLength(5),
      Validators.maxLength(60)
    ]],
    releasedAt: [new Date(), Validators.required],
    category: ['BEGINNER', Validators.required],
    courseType: ['premium', Validators.required],
    downloadsAllowed: [false, Validators.requiredTrue],
    longDescription: ['', [Validators.required, Validators.minLength(3)]]
  });

  constructor(private fb: FormBuilder) {

  }

  get courseTitle() {
    return this.form.controls['title'];
  }

}

...and here's the html code:


<div [formGroup]="form" class="course-details-form">

    <mat-form-field floatLabel="auto">
        <input matInput placeholder="Course title" formControlname="title" #title>
        <mat-hint align="end">{{title.value.length}} / 60</mat-hint>
        <mat-error *ngIf="courseTitle.errors?.minlength">
            A minimum length of 5 characters is required.
        </mat-error>
    </mat-form-field>

</div>

I've tried all kinds of things, but it just seems like the minLength() validator isn't working. At the moment I have no confidence that any of the validators are working. Any clues much appreciated.

spopida commented 2 years ago

OK - finally worked it out - I mis-spelled 'formControlname' - with a lowercase 'n' instead of 'N' ! I think I need a better plugin for VSCode!