2

I have an Angular form.

<form class="p-16" name="poMaterialDetailForm [formGroup]="poMaterialDetailForm">

Inside the form I have a save button. 

<button mat-raised-button 
        class="save-poMaterialDetail-button ml-32 mr-8"
        [disabled]="poMaterialDetailForm.invalid || poMaterialDetailForm.pristine"
        <span>SAVE</span>
</button>

The disabled attribute allows me to disable the button when there are no changes in the form. If form values are changed then save button becomes active.

I just added a user permission feature and save button is also disabled for users who does not have editing access.

<button mat-raised-button
        class="save-clientManagementDetail-button ml-32 mr-8"
        [disabled]="isDisabled('ClientManagement','Edit')"
        *ngIf="pageType ==='edit'" (click)="saveClientManagementDetail()">
    <span>SAVE</span>
</button>

Now I want to use both features for disabled attribute. Here is my condition:

[disabled]="(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine) 
&& isDisabled('ClientManagement','Edit')"

Unfortunately I cannot make this conditions to work. When I use the conditions seperately they work but when I try to use them at the same time, disabled attribute does not change properly accordingly.

Hope the conditions are clear. I would appreciate if anyone can shed some light on this subject.

Cheers, Johnny

Johnny
  • 1,685
  • 6
  • 24
  • 42

1 Answers1

1

If i understand correctly you must change the AND to an OR:

(clientManagementDetailForm.invalid || clientManagementDetailForm.pristine) || isDisabled('ClientManagement','Edit')

Because you dont whant the submit button if the form is invalid OR the user dont have the editing permission.

Jakob Em
  • 1,032
  • 9
  • 19
  • Seconded, and the brackets can be removed from the first condition. –  Apr 28 '19 at 21:15
  • Yes I agree, but he could leave them there to help with the reading – Jakob Em Apr 28 '19 at 21:16
  • 1
    Even better, I'd say abstract the whole boolean clause to a suitably named variable, as I'm sure it will be re-used, and it is becoming long. –  Apr 28 '19 at 21:19
  • @javascript-sucks how can I abstract the whole boolean clause? – Johnny Apr 28 '19 at 21:35
  • 1
    @Johnny you could create a method in your components .ts file which is named somethin like `canSave() ` and in the method you could return the evaluated boolean value, this would make your html more readable because you could just write `[disabled]="canSave()" ` – Jakob Em Apr 28 '19 at 21:43
  • @JakobEm If you want to see why calling functions from the template is a bad idea, add a `console.log` inside the `canSave` function – Drenai Apr 28 '19 at 22:16
  • @Drenai I know what you mean, but i think that the boolean value is evaluated anyways that often so i dont't think it wont make any big difference perfomance wise. Correct me if im wrong – Jakob Em Apr 28 '19 at 22:18
  • @JakobEm it can cause unexpected problems - https://stackoverflow.com/questions/37876533/ngfor-running-an-infinite-loop-in-angular2 – Drenai Apr 28 '19 at 22:32