mercredi 25 mai 2016

disable send button when two conditions aren't met not working in ember.js

I'm trying to create a contact form where the 'Send' button is disabled unless a valid email and a message has been entered. For some reason it's working in the reverse way, when valid email and message entered the button disables. I'm new to ember and cant seem to negate it.

Contact controller

export default Ember.Controller.extend({

email: '',

message: '',

hasValidEmailAddress: Ember.computed.match('email', /^.+@.+\..+$/),
hasEnteredMessage: Ember.computed.notEmpty('message'),

isDisabled: Ember.computed.and('hasValidEmailAddress', 'hasEnteredMessage'),

actions: {

    saveMessage() {
        this.set('responseMessage', `Thank you, your message has been sent. We will get back to you as soon as possible.`);
        this.set('email', '');
        this.set('message', '');
    }
}

});

Contact Template

<div class='row'>

    <h2>Contact</h2>

    <div class='col-md-2'></div>
    <div class='col-md-8'>

        <br/><br/>

        <form>
            <div class='form-group form-group'>
                <label for='email' class=''>Email</label>
                
            </div>
            <br/>
            <div class='form-group form-group'>
                <label for='message'>Message</label>
                
            </div>
            <br/>
            <button class='btn btn-primary btn-default pull-right' disabled= >Send</button>
        </form>

    </div>
</div>

I've tried negating the isDisabled in the template, negating the arguments in the controller both inside and outside of the parenthesis for isDisabled and tried negating the entire line.

Any help would be much appreciated.

Cheers




Aucun commentaire:

Enregistrer un commentaire