Question

我正在尝试创建一个联系表单，其中“发送”按钮被禁用，除非输入了有效的电子邮件和消息。出于某种原因，它以相反的方式工作，当有效的电子邮件和消息输入按钮禁用时。我是贪婪的新人，似乎无法否定它。

联系控制器

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', '');
    }
}

});

联系模板

<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>
                {{input type='email' value=email class='form-control' id='email' placeholder='Email'}}
            </div>
            <br/>
            <div class='form-group form-group'>
                <label for='message'>Message</label>
                {{textarea value=message class='form-control' id='message' placeholder='Message'}}
            </div>
            <br/>
            <button class='btn btn-primary btn-default pull-right' disabled={{isDisabled}} {{action 'saveMessage'}}>Send</button>
        </form>

    </div>
</div>

我试过否定模板中的isDisabled，否定了isDisabled括号内外的控制器中的参数，并试图否定整行。

非常感谢任何帮助。

干杯

Answer 1

在你的代码中，isDisabled属性实际上应该被称为isEnabled，因为那就是你给它的结果。因为当hasValidEmailAddress = true且hasEnteredMessage = true =＆gt; isDisabled = true，然后将禁用您的按钮。

你可以制作另一个计算属性，执行reallyDisabled: Ember.computed.not('isDisabled')并在模板中使用它。

或者您可以安装ember-truth-helpers插件（https://github.com/jmurphyau/ember-truth-helpers），然后在您的模板中执行disabled={{not isDisabled}}

当不满足两个条件不能在ember.js中工作时禁用发送按钮

1 个答案: