Angular Material:提交父表单时，必填的mat-input字段不显示错误

<form [formGroup]="myForm" (ngSubmit)="submitForm()">
  <mat-form-field>
    <input matInput formControlName="myField" required>
    <mat-error *ngIf="myForm.get('myField').invalid && myForm.get('myField').touched">
      该字段为必填字段
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary" type="submit">提交</button>
</form>

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myField: ['', Validators.required]
    });
  }

  submitForm() {
    if (this.myForm.valid) {
      // 执行提交操作
    } else {
      // 表单验证失败，显示错误信息
      this.myForm.markAllAsTouched();
    }
  }
}