Disable button in angular with two conditions?

Taking it a step further

Dealing with form validation and custom conditions

In Angular, when tying the button's disabled state to the validation of a form along with a custom condition, you can utilize the form's valid property:

// component.ts
isFormValid(): boolean {
  // Because who wants a form with invalid data, amirite?
  return this.yourForm.valid;
}

// yourForm.html
<button [disabled]="!isFormValid() || customCondition">Submit</button>


The button remains disabled until the form becomes valid (yourForm.valid returns true) and customCondition is satisfied.

Smart toggling with component variables

If you're looking for further control, consider maintaining the disabled state from within your component's logic:

// component.ts
buttonDisabled: boolean = true; // Button starts off in a well-earned 'disabled' holiday

ngOnInit() {
  // While on holiday, button may decide to enable itself based on some logic
}

// Other event handlers or observables might also influence the button's state


And your bound field in HTML:

<button [disabled]="buttonDisabled">Submit</button>


This gives you a more direct control over the button's state, right from within your component.

Readable conditions: Simplified!

When your logical conditions become complex, retain readability and cleanliness by moving the logic into component variables:

// component.ts
get isButtonDisabled(): boolean {
  // The fancy "One ring to rule them all" kind of boolean
  return !(this.canValidate || this.yourForm.valid);
}

// template.html
<button [disabled]="isButtonDisabled">Submit</button>


From above, the button’s disabled state works quite like a dual-lock system:

🔒 Button Status (Button)
   |
   🧩 Condition 1: [🔴 False] [🟢 True]
   |
   🧩 Condition 2: [🔴 False] [🟢 True]

Think of it as the lock status:

🔒 When BOTH conditions are:
🟢🟢 - Unlocked 🗝 (Button Enabled)
🔴🟢 - Locked 🔒 (Button Disabled)
🟢🔴 - Locked 🔒 (Button Disabled)
🔴🔴 - Ultra Locked 🔏 (Button Disabled)

Diving Deeper

Playing nice with form interactions

Picking the correct button type can affect the performance of your form:

• type="submit" buttons are generally used to submit a form.
• type="button" gives you manual control over button clicks without automatically submitting the form.

While using the Angular’s (ngSubmit) event, ensure your button lines up with the intended behavior:

<form (ngSubmit)="onSubmit()" [formGroup]="yourForm">
  <button type="submit" [disabled]="isButtonDisabled">Submit</button>
</form>


Keeping the syntax in check

Property binding in Angular follows a certain syntax that needs to be strictly adhered to:

• Use square brackets [] around the disabled attribute for binding.
• For conditional attributes, a ternary operator can be used:

<button [attr.disabled]="condition ? '' : null">Button</button>


The attr prefix is using to conditionally apply the disabled attribute on button. The condition is either a variable or an expression from component.