How to enable / disable a button based on a checkbox being checked in Angular

Question

I am trying to add validation to my Angular app's form.

The first section of my form contains:

• 1 checkbox
• 2 radio button group's
• 1 button (which navigates to the next section of the form)

The button is to be disabled until the user checks the checkbox & chooses an option from both radio button group's.

Here is the code for my button:

<button
    [disabled]="
        theChkAcceptTerms.invalid || 
        theInsuredType.invalid || 
        theReportInjury.invalid
        ">

And here is the code for my checkbox:

<checkbox
    id="accept"
    heading="I accept"
    name="accept"
    value="accept"
    [(ngModel)]="chkAcceptTerms"
    required
    #theChkAcceptTerms="ngModel">
</checkbox>

Currently, when the page loads the button is disabled. It is only enabled once I check the checkbox, & choose an option in both radio groups.

However, if I un-check the checkbox, the button is not disabled.

Can someone please tell me how I can disable the above button if the checkbox is not checked. Thanks a lot!

Answer 1

You need to get the two way data binding for your controls and check them in the disabled attribute as

[disabled]="!checkBox || !radioGroup1 || !radioGroup2"

Check out the sample I created HERE