Question

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

例如

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

第一个例子

ITEM 1 -> FAILED -> Remarks (required)

ITEM 2 -> FAILED -> Remarks (required)

ITEM 3 -> FAILED -> Remarks (required)

ITEM 4 -> FAILED -> Remarks (required)

按钮为disabled，用户应填写所有文本区域。

第二个例子

ITEM 1 -> FAILED -> Remarks (required)

ITEM 2 -> PASSED -> Remarks (optional)

ITEM 3 -> FAILED -> Remarks (required)

ITEM 4 -> FAILED -> Remarks (required)

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

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属性绑定到按钮的输入绑定，导致按钮变成灰色，直到表单有效为止。

这里是updated StackBlitz

评论后更新

这是一个updated StackBlitz，根据单选按钮的不同，文本区域变为必需或可选。

我更改了：

添加了一些类型，因为我们出于某种原因使用打字稿
我删除了嵌套列表，转而使用控件来确定占位符
每个任务现在都有其自己的formcontrol。这意味着每个任务都可以自己进行验证，而不是一个全局验证器。这将使用户更清楚地知道错误的地方（如果您将css添加到验证中）
单选按钮的onvaluechanged函数现在传递了任务ID，该任务ID使我们可以查找该特定任务的表单控件。根据值，为备注设置一个新的验证器，从而根据需要验证表单
添加了[disabled]输入绑定以在表单无效时禁用按钮

Answer 2

编辑：你可以试试这个

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

如果isValid为true，则将触发onConfirm。

如何禁用按钮或基于角度启用单选按钮

2 个答案:

初始响应

评论后更新