如何禁用按鈕或基於角度單選按鈕啟用

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)

用戶應該填充三個文本區域，它是“失敗”，然后在填充文本區域后按鈕將啟用。

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 示例演示了這一點。

按鈕具有 [disabled] 輸入，可以鏈接到與表單相關的變量。 在你的情況下，這將是

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

這里我們將表單的taskFormGroup.valid屬性綁定到按鈕的輸入綁定，導致按鈕變灰，直到表單有效。

這是更新的 StackBlitz

評論后更新

這是更新的 StackBlitz ，其中文本區域成為必需或可選，具體取決於單選按鈕。

我改變了什么：

• 添加了一些類型，因為我們出於某種原因使用打字稿

• 我刪除了嵌套列表，轉而使用控件來確定占位符

• 每個任務現在都有自己的表單控件。 這意味着每個任務都可以自行驗證，而不是一個全局驗證器。 這將使用戶更清楚哪里出錯了（如果您將 css 添加到驗證中）

• 單選按鈕的 onvaluechanged 函數現在傳遞了任務 ID，它允許我們查找該特定任務的表單控件。 根據值，為備注設置了一個新的驗證器，因此可以根據需要驗證表單

• 添加[disabled]輸入綁定，在表單無效時禁用按鈕

Answer 2

編輯：你可以試試這個

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

如果 isValid 為真，則 onConfirm 將被觸發。