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

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>

我们使用＆＃39;！＆＃39;在您的ngModel变量之前，因为我们想要变量来关闭＆＃39; false＆＃39;或空字符串。