Проверка формы с ошибкой mat на Angular

Question

Я только начал изучать угловой с некоторыми видео на YouTube. Я изучал проверку формы, и в видео, которое я использовал, использовались следующие условные обозначения:

<mat-error *ngIf="content.invalid">Sth as Error</mat-error>
<mat-error *ngIf="postForm.getControl('title').invalid">Sth as Error</mat-error>

Более того, я попробовал себя, но, видимо, не получилось. По каким причинам они не работают? Это старая конвенция?

Полный код:

после create.component.html

<mat-card>
  <form (submit)="onAddPost(postForm)" #postForm="ngForm">
    <mat-form-field>
      <input
        matInput
        type="text"
        name="title"
        ngModel
        required>
      <mat-error *ngIf="postForm.getControl('title').invalid">Enter Smt</mat-error>
   </mat-form-field>
   <mat-form-field>
      <textarea
         matInput
         rows="4"
         name="content"
         ngModel
         required
         #content="ngModel">
      </textarea>
      <mat-error *ngIf="content.invalid">Enter stm</mat-error>
   </mat-form-field>
   <button
      mat-raised-button
      color="primary"
      type="submit">Save Post</button>
 </form>
</mat-card>

пост-create.component.ts

import { Component, EventEmitter, Output } from '@angular/core';
import { Post } from '../post.model';
import { NgForm } from '@angular/forms';

@Component({
   selector: 'app-post-create',
   templateUrl: './post-create.component.html',
   styleUrls: ['./post-create.component.css']
})

export class PostCreateComponent {
    @Output() postCreated = new EventEmitter<Post>();

    onAddPost(form: NgForm) {
      if (form.invalid) {
         return;
      }

      const post: Post = {
         title: form.value.title,
         content: form.value.content
      };
      this.postCreated.emit(post);
    }
}

ОБНОВЛЕНИЕ: я обнаружил, что этот сломан

<mat-error *ngIf="postForm.getControl('title').invalid">Sth as Error</mat-error> Как это исправить (без добавления ссылки)?

Answer 1

Я нашел ответ. Причина - getControl(). Это не работает. Мой друг объяснил мне, что getControl() ожидает FormControl экземпляр, а не строку. Поэтому я мог бы добавить ссылку, и я мог бы использовать как

<mat-error *ngIf="postForm.getControl(title)?.invalid">...</mat-error> (title added as a local reference)

OR Я мог бы использовать его как без ссылки

<mat-error *ngIf="postForm.form.get('title')?.invalid">...</mat-error>