How to disabled the button or enabled based on radio button in angular

Question

how to make the button disabled when the remarks is failed.

for example

there's an array which it has two to four item.

first example

ITEM 1 -> FAILED -> Remarks (required)

ITEM 2 -> FAILED -> Remarks (required)

ITEM 3 -> FAILED -> Remarks (required)

ITEM 4 -> FAILED -> Remarks (required)

the button is disabled, the user should fillup all textarea.

second example

ITEM 1 -> FAILED -> Remarks (required)

ITEM 2 -> PASSED -> Remarks (optional)

ITEM 3 -> FAILED -> Remarks (required)

ITEM 4 -> FAILED -> Remarks (required)

the user should fillup the three textarea which it's the ```FAILED`` and then after fillup the textarea the button will enabled.

ITEM 1 -> PASSED -> Remarks (optional)

ITEM 2 -> PASSED -> Remarks (optional)

ITEM 3 -> PASSED -> Remarks (optional)

ITEM 4 -> PASSED -> Remarks (optional)

the button automatically enabled.

here's the code: https://stackblitz.com/edit/ng-zorro-antd-start-xz4c93

thanks in advance

Answer 1

Initial response

There is an Angular Example demonstrating this.

A button has the [disabled] input which can be linked to a variable related to the form. In your case this would be

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

Here we bind the taskFormGroup.valid property of the form to the input binding of the button, causing the button to be greyed out until the form is valid.

Here is the updated StackBlitz

Update after comment

Here is an updated StackBlitz where a text area becomes required or optional, depending on the radio button.

What I changed:

• Added some types because we are using typescript for a reason

• I removed the nested lists in favor of using the controls to determine the placeholder

• Every task now has its own formcontrols. This means that every task can validated on it's own, as opposed to one global validator. This will make it much more clear to the user where it is wrong (if you add css to the validation)

• The onvaluechanged function for the radio button now passed the task ID which allows us to look up the form controls for that particular task. Depending on the value, a new validator is set for the remarks and thus the form is validated as you'd like

• Added the [disabled] input binding to disable the button if the form is invalid

Answer 2

Edited: You can try this

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

if isValid is true then onConfirm will be fired.