组件组成 - 验证问题答案

【问题标题】：Components composition - validation issue组件组成 - 验证问题
【发布时间】：2019-09-13 03:10:10
【问题描述】：

我正在制作简单的表格，不想一次又一次地重复相同的组件。所以我创建了一些组件，将其他输入组合在一起。

这是示例项目： https://stackblitz.com/edit/angular-material-with-angular-v5-5whzeh

如您所见：输入仍然无效，但表单作为一个整体是有效的。我应该添加什么才能使其正常工作？

编辑：

正如您在演示中看到的：当输入不包含任何文本（为空）时，输入无效。没关系。但是看看表格的有效性。完全忽略输入的有效性，它始终有效。

我以为会是这样的：

输入：有效，表单：有效

输入：无效，表单：无效

【问题讨论】：

在问题中输入minimal reproducible example。
请在此处添加您在演示中包含的最相关代码以供后代使用。
编辑了我的问题。

标签： angular validation

【解决方案1】：

您在 stackblitz 演示的控制台中遇到错误。

错误错误：mat-form-field 必须包含 MatFormFieldControl。您是否忘记将 matInput 添加到本机输入或 textarea 元素？

要解决这个问题，只需在属性中的任意位置添加matInput。像这样：

<mat-form-field>
      <input matInput [(ngModel)]="value" name="input" #input="ngModel" name="test" 
          required placeholder="im invalid">
</mat-form-field>

这应该会消除错误，并且会显示表单有效性的输出。

Updated Demo

【讨论】：

查看我更新的问题。当输入无效时，我希望表单无效。
@Krzysztof 您需要传递对输入的引用。对于类似 id 的东西，建议使用响应式表单，然后您可以传递表单控件的引用。