bind disabled attribute to more logic - eg. validation of form

[Iftahh]

I have a form with validation and an async "submit" button,

I would like to make the button disabled when the validation fails OR while the async action is taking place.

Is there an elegant way to make it happen?

I recommend adding this use case to the documentation/demo because the form+validation+async+submit is a very common use case.

[bcardarella]

couldn't you just do something like:

{{async-button disabled=isValid}}

/cc @danmcclain

[danmcclain]

@bcardarella Confirm, the disabled binding is available (just verified on a project I am working on)

[danmcclain]

Actually, I think binding a disabled value will remove the computed

[danmcclain]

https://github.com/dockyard/ember-cli-async-button/blob/master/addon/components/async-button.js#L22

[Iftahh]

The problem with {{async-button disabled=isntValid}} is that it overrides the default async-button disabled and takes ONLY the validation into account, so while the async action is running the button is enabled.

@danmcclain is correct, binding a disabled will remove the computed disabled

[bcardarella]

@Iftahh I suspect a new CP would have to be written that is similar to:

// in your app you'll have to override the component:
// app/components/async-button.js
import Ember from 'ember';
import AsyncButtonComponent from 'ember-cli-async-button/components/async-button';

const {
  computed
} = Ember;

export default AsyncButtonComponent.extend({
  disabled: computed('textState', 'isValid', function() {
    let textState = get(this, 'textState');
    let isValid = get(this, 'isValid');

    if (!isValid) {
      return false;
    } else if (textState === 'pending') {
      return false;
    } else {
      return true;
    }
  })
});

Then when you call the component you can do: {{async-button isValid=isValid}}

[Iftahh]

Thanks!

[courajs]

This is what the disableWhen option is for:

{{async-button disableWhen=isInvalid}}

We could name this option just disabled instead of disableWhen. We could use _disabled internally so it isn't overwritten. Then your original code would have worked. I think this would be a more natural API. @bcardarella?