javascript - 如何禁用按钮或基于 Angular 单选按钮启用按钮

Question

如何在备注失败时禁用该按钮。

例如

有一个数组，其中有两到四个项目。

第一个例子

ITEM 1 -> FAILED -> Remarks (required)

ITEM 2 -> FAILED -> Remarks (required)

ITEM 3 -> FAILED -> Remarks (required)

ITEM 4 -> FAILED -> Remarks (required)

该按钮已禁用，用户应填写所有文本区域。

第二个例子

ITEM 1 -> FAILED -> Remarks (required)

ITEM 2 -> PASSED -> Remarks (optional)

ITEM 3 -> FAILED -> Remarks (required)

ITEM 4 -> FAILED -> Remarks (required)

用户应该填写“失败”的三个文本区域，然后在填充文本区域后按钮将启用。

ITEM 1 -> PASSED -> Remarks (optional)

ITEM 2 -> PASSED -> Remarks (optional)

ITEM 3 -> PASSED -> Remarks (optional)

ITEM 4 -> PASSED -> Remarks (optional)

按钮自动启用。

这是代码: https://stackblitz.com/edit/ng-zorro-antd-start-xz4c93

提前致谢

Answer 1

初始响应

有一个Angular Example证明了这一点。

按钮具有[禁用]输入，可以链接到与表单相关的变量。 在你的情况下，这将是

<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="!taskFormGroup.valid" [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
</button>

这里我们将表单的 taskFormGroup.valid 属性绑定(bind)到按钮的输入绑定(bind)，导致按钮变灰，直到表单有效。

这是updated StackBlitz

评论后更新

这是一个updated StackBlitz其中文本区域变为必需或可选，具体取决于单选按钮。

我改变了什么:

• 添加了一些类型，因为我们出于某种原因使用 typescript

• 我删除了嵌套列表，转而使用控件来确定占位符

• 现在每个任务都有自己的表单控件。这意味着每个任务都可以单独验证，而不是一个全局验证器。这将使用户更清楚哪里出错了(如果您将 css 添加到验证中)

• 单选按钮的 onvaluechanged 函数现在传递任务 ID，这允许我们查找该特定任务的表单控件。根据值，为备注设置一个新的验证器，从而根据您的需要验证表单

• 添加了 [disabled] 输入绑定(bind)，以便在表单无效时禁用按钮