表单组验证不适用于自定义创建的组件

Question

我的组件有一些下拉菜单。选择下拉列表后，将加载一个自定义组件，其中包含一个文本框。 例如，一页上有 3 个控件，一旦用户从下拉列表中选择特定选项，第 4 个文本框就会从单独的组件中加载。

如果第 4 个文本框为空，我如何禁用我的提交按钮。

以下是自定义组件的 HTML 代码

<input class="form-control" type="text" value="" 
     [(ngModel)]="configurationData.sno" name="sno" required>

Answer 1

要禁用按钮，您可以使用 Angular 属性绑定并传递一个保存表单有效状态的变量，如下所示：

<button [disabled]="!ValidForm">Click</button>

如果表单有效不要禁用，如果表单无效则向按钮添加禁用属性

或者使用您的输入组件，我们可以为该输入传递 ngModel，如果输入为空，它将返回一个评估为 false 的空字符串，如果有一个值，那么它将评估为 true：

<button [disabled]="!configurationData.sno">Click</button>

我们使用“！”在您的 ngModel 变量之前，因为我们希望变量关闭“false”或空字符串的禁用属性。