CODEWITHSUNDEEP
javascriptvalidationaurelia
Neglected Sanity
Neglected Sanity

Reputation: 1934

disabled.bind in Aurelia not working correctly

I have a form, in the form there is a custom component that has certain fields in it. At the end of the form there is a button. The button has...

disabled.bind="!(formValid && subFromValid)"

Now, on the custom component I have a two-way binding of a variable "subFormValid" The subFormValid is only valid when the validation in the custom component is valid. So, the sub form validates some fields and sets subFormValid = true. Even though the "formValid" is false, the button is now enabled. I can't figure out why and it is driving me nuts. I even went so far as to add a get function to a variable and add console logs in it, like so...

<button type="submit" disabled.bind="wholeFormValid">Submit</button>

Then in my class I have...

get wholeFormValid() {
  console.log("validating form");
  console.log(!(this.formValid && this.subFormValid));
  return !(formValid && subFormValid);
}

I get a million plus lines in the console, but I was able to watch it, the entire time. When I first load the page it was logging...

validating form

true

Then I filled out the subform, and checked the console. The console showed...

validating form

true

Yet, the button was now enabled.

For some reason whenever subFormValid = true, the button is enabled, regardless of formValid.

Does anyone know how to disable a button unless 2 conditions are met? Everything I do enables the button as soon as subFormValid is true, even though the console is still logging "true", which should disable the button.

Just to help out, if anyone is wondering why there is a subform in the form it is because the address needs to be validated using Smarty Streets and we want to be able to reuse that part of the form in other places, so I created a custom component for the address section that validates the input, and validates the address. It is being called in the form like so...

<require from="components/smarty-streets"></require>

Then using like this...

<smarty-streets form-is-validated.two-way="subFormValid"></smarty-streets>

Then in smarty streets I have...

@bindable formIsValidated;

and I change the value from true to false and vice-versa depending on the validation in the component.

Upvotes: 0

Views: 5598

Answers (1)

Jesse
Jesse

Reputation: 3622

I have tried to recreate your problem using the following:

<input type="checkbox" checked.bind="formValid"/>
<input type="checkbox" checked.bind="subFormValid"/>
<button disabled.bind="wholeFormValid">Submit</button>

I noticed in your function that you used this.formValid in the console.log line, but in the return line you used formValid, without this. This seems to be a different variable than your actual binding variables. I think your function should look like this:

get wholeFormValid() {
  console.log("validating form");
  console.log(!(this.formValid && this.subFormValid));
  return !(this.formValid && this.subFormValid);
}

Edit: I also strongly recommend using the @computedFrom decorator on your get() to reduce the amount of calculations aurelia does. You can read more on that here.

Upvotes: 4

Related Questions