Angular2更改按钮禁用功能

Question

I have a simple form with a button that i want to control its disabled state using a simple function

so i wrote the following

<button pButton type="button" icon="fa-plus" iconPos="left" label="Add Device" class="ui-button-swat" (click) = "addDevice()" [disabled]="!checkAddDeviceConditions()"></button>

The function itsself is simple checking that some fields have values, but i noticed that the function is being called whenever the user moves the mouse, calling it many times in vain.

im concerned about the issue, is it considered the correct way to control the disable property?

Answer 1

Correct or not is going to be fairly case specific. If you are noticing performance errors because of this, or the function is extremely intensive, then probably not. If it is really simple, like it sounds it is in this case, then it probably doesn't matter much.

However, if you want it to only run when those fields update, you could assign it to a variable inside of the checkAddDeviceConditions function, instead of returning a boolean, and put a

(change)="checkAddDeviceConditions()"

or

(input)="checkAddDeviceConditions()"

on each field you want to trigger a checking of the update.