CODEWITHSUNDEEP
angulartypescriptangular5
wwhitewalter
wwhitewalter

Reputation: 47

Enable button if a checkbox in loop is checked Angular 5

i'm relatively new on Angular 5 i have a button like this:

          <button *ngIf="type!='invoices' && this.action==='edit'" disabled (click)="genera(fields.termini)" class="ml-16 mat-raised-button mat-accent" mat-raised-button="" disabled color="primary">Genera fattura</button>

i need to add another condition to my component.ts that enable this button only when one of the checkbox in a loop is selected. Here is my loop:

   genera(model) 
   {
    for (let scadenza of this.model.partial_payments) 
    {
      if (scadenza.fattura === true && scadenza.payed != '') 
      {
        alert('Funziona');
      }
    }
  }

Upvotes: 0

Views: 906

Answers (2)

Dean
Dean

Reputation: 2273

There are multiple things going on here. First off: in your html you are setting disabled twice, which your editor should be complaining about. Second, you need a backing field to bind your disabled status to. Then you need to bind disabled like this: [disabled]="myBackingField". I would bind this to a getter in my component or model if it were me. Here's an example of how you could create a getter that encapsulates this logic:

get anyPartialHasFattura(): boolean {
  for (let scadenza of this.model.partial_payments) {
    if (scadenza.fattura === true) {
      return true;
    }
  }
  return false;
}

And here's a stripped down version of your button that binds disabled to this new field:

<button [disabled]="anyPartialHasFattura">Genera fattura</button>

Finally, here's a quick stackblitz I put together to show this in action. Try clicking one of those checkboxes and see what happens to disabled state on the button.

One final note on why [disabled]="someBoolean" works. The only actual valid way to represent disabled as false in HTML is via the omission of the disabled attribute altogether. So why does this work? You should read this section of the Angular docs on template syntax. I'll include some especially relevant quotes:

You'll get to that peculiar bracket notation in a moment. Looking beyond it, your intuition suggests that you're binding to the button's disabled attribute and setting it to the current value of the component's isUnchanged property.

Your intuition is incorrect! Your everyday HTML mental model is misleading. In fact, once you start data binding, you are no longer working with HTML attributes. You aren't setting attributes. You are setting the properties of DOM elements, components, and directives.

...

The disabled attribute is another peculiar example. A button's disabled property is false by default so the button is enabled. When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled.

Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.

Setting the button's disabled property (say, with an Angular binding) disables or enables the button. The value of the property matters.

The HTML attribute and the DOM property are not the same thing, even when they have the same name.

Upvotes: 1

Osakr
Osakr

Reputation: 1066

Instead of using disabled use [attr.disabled]

<button *ngIf="type!='invoices' && this.action==='edit'" [attr.disabled]=" buttonDisabled == true" (click)="genera(fields.termini)" class="ml-16 mat-raised-button mat-accent" mat-raised-button="" disabled color="primary">Genera fattura</button>

Upvotes: 0

Related Questions