检查组件内的字段是否有效答案

【问题标题】：Check if a field inside a component is valid检查组件内的字段是否有效
【发布时间】：2020-03-07 06:33:03
【问题描述】：

我正在学习 Angular2，我正在尝试检查组件内的文本字段是否有效。我构建了一个名为 MyUpload 的组件，并在模态组件中调用它。在我的模式中，我正在尝试验证其中的字段（myField）是否有效。我试图做这样的事情：

<my-upload #upload [maxSize]="10000" [multiple]="true"></my-upload>
<textarea name="comment" ... ></textarea>

<button ... 
  [disabled]="f.form.valid && upload.form.myField.valid" ...>Save</button>

但我明白了：

无法读取未定义的属性“myField”

我也尝试了 upload.form.control.myField.valid，但它不起作用。 #upload 似乎没有引用我的组件内的表单。

我该怎么做？

【问题讨论】：

您看到的错误是由于 my-upload 组件在按钮属性尝试访问它时不完全可用。 my-upload 组件里面的表单是如何实现的？
如果您尝试f.form.valid && upload.form?.myField?.valid 会怎样？

标签： angular

【解决方案1】：

查看此处的答案以获得更多解释。 What does Angular 2 hashtags in template mean?

简而言之，这意味着 # 引用是一个 html 引用，并且只包含该引用的 html 属性，而不包括底层组件的 html 成员。

upload.form 表示在你的 html 中 my-upload html 元素上有一个 form 属性。没有，所以为空。

要像这样使用组件，它应该实现一个自定义表单控件并像处理输入一样处理。您可以使用它，但必须在子组件中声明表单，并且应该根据问题中的注释进行一些空检查。

检查自定义控件的 ControlValueAccessor。查看 https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html 提供一个很好的指南。

【讨论】：