Angular mat-form-field报mat-form-field must contain a MatFormFieldControl错误排查

问题原因 #

你遇到的报错是Angular Material表单组件的强制校验规则触发导致的：<mat-form-field> 容器要求内部必须始终存在实现了MatFormFieldControl接口的子元素（最常见的就是添加了matInput指令的输入框）。
你当前代码中，把控制显隐的*ngIf="showInput"写在了<input>标签上，当showInput值为false时，input元素会被直接从DOM中移除，此时外层的<mat-form-field>就变成了空容器，直接触发报错。

修复方案 #

把*ngIf判断移动到<mat-form-field>标签上，不需要显示的时候连同外层表单容器一起隐藏即可，修改后的代码如下：

<!-- 原来的第三组输入框修改为 -->
<mat-form-field class="example-full-width" *ngIf="showInput">
  <input matInput placeholder="输入框3" formControlName="input3" name="input3" required>
</mat-form-field>

额外注意项 #

• 对应表单组rowForm中需要提前声明input3对应的FormControl，不要因为默认隐藏就不初始化，否则会出现表单绑定报错。
• 如果你需要在输入框隐藏时跳过input3的必填校验，可以在toggleInput切换方法中，手动调用input3控件的setValidators和updateValueAndValidity方法动态增删校验规则。

内容的提问来源于stack exchange，提问作者JustABeginner