Question

我刚刚开始学习一些youtube视频。我正在学习表单验证，并且跟随的视频使用了以下类型的约定：

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

此外，我尝试了一下，但显然没有用。它们不起作用的原因是什么？这是一个古老的约定吗？

完整代码：

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

post-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实例，而不是字符串。因此，我可以添加参考，并且可以使用like

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

或我可以像没有参考一样使用它

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

在Angular上使用mat-error进行表单验证

1 个答案: