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

Angular Material是一个UI组件库，它提供了一套现代化的UI组件，帮助开发者构建美观、响应式的Web应用程序。在Angular应用中使用Angular Material可以快速构建用户界面，并且提供了丰富的样式和交互效果。

针对你提到的问题，当使用Angular Material中的mat-input字段作为必填字段时，如果在提交父表单时该字段没有填写，应该显示错误信息。以下是解决该问题的步骤：

在父组件的HTML模板中，使用Angular的表单控件来创建表单，并将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>

在父组件的TypeScript代码中，创建表单并进行表单验证。例如：

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();
    }
  }
}

在上述代码中，我们使用了Angular的Reactive Forms来创建表单，并使用Validators.required验证器将myField字段设置为必填字段。在submitForm方法中，我们检查表单的有效性，如果表单验证失败，我们使用markAllAsTouched方法将所有字段标记为已触摸，这样就会显示错误信息。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。

腾讯云云服务器（CVM）：提供弹性、可靠的云服务器，适用于各种规模的应用程序和工作负载。您可以根据实际需求选择不同配置的云服务器，并根据业务需求进行弹性扩展。了解更多信息，请访问腾讯云云服务器（CVM）。
腾讯云云数据库MySQL：提供高性能、可扩展的关系型数据库服务，适用于各种Web应用程序和企业级应用程序。腾讯云云数据库MySQL支持自动备份、容灾、监控等功能，保障数据的安全和可靠性。了解更多信息，请访问腾讯云云数据库MySQL。

希望以上信息能够帮助到你解决问题。如果还有其他疑问，请随时提问。