Question

我正在学习Ember.js，现在我被一个小小的联系表格困住了。我有两个字段，一个用于电子邮件，另一个用于消息，我已经为它们设置了一些验证。除非验证得到满足，否则发送＆＃39;必须禁用按钮。此外，当一切正常并且用户发送消息时，表单必须替换为发送消息的闪存通知。所以，这是代码：

应用/控制器/ contact.js ：

import Ember from 'ember';

export default Ember.Route.extend({
    emailAddress: '',
    message: '',

    isValidEmail: Ember.computed.match('emailAddress', /^.+@.+\..+$/),
    isValidMessage: Ember.computed.gte('message.length', 5),

    isValid: Ember.computed.and('isValidEmail', 'isValidMessage'),
    isInvalid: Ember.computed.not('isValid'),

    actions: {
        sendMessage() {
            alert(`Sending message from: ${this.get('emailAddress')}`);
            this.set('responseMessage', `Thank you! We've received message from: ${this.get('emailAddress')} . You will be responsed ASAP!`);
            this.set('emailAddress', '');
        }
    }
});

和模板 contact.hbs ：

<h1>Contact us</h1>
<div class="well well-sm">
    <p> If you have any questions, feel free to contact us!</p>
</div>
<div class="row">
    <div class="col-md-6">
    {{#if responseMessage}}
        <br/>
        <div class="alert alert-success">{{responseMessage}}</div>
    {{else}}
        <div class="form-group">
            {{input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"}}
            {{#if emailAddress.isValidEmail}}<span class="glyphicon glyphicon-ok form-control-feedback"></span>{{/if}}
        </div>
        <div class="form-group">
            {{textarea class="form-control" placeholder="Your message. (At least 5 characters.)" rows="7" value=message}}
            {{#if message.isValidMessage}}<span class="glyphicon glyphicon-ok form-control-feedback"></span>{{/if}}
        </div>
    {{/if}}
    <button class="btn btn-primary btn-lg btn-block" disabled={{isInvalid}} {{action 'sendMessage'}}>Contact us!</button>
</div>

但是，仍然：

当表单为空时，该按钮仍然有效。
填写表格时没有出现字形。
发送邮件时不会显示任何通知。

我做错了什么？

Answer 1

您需要使用表单名称以及ng-disabled：DEMO

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

Answer 2

请随意投票给我，因为我已经表现出臭名昭着的缺乏关注 - 假装在app/controllers/contact.js中的代码在app/routers/contact.js ...所以，当然，当我把它移到正确的地方时，一切正常。特别感谢@Parag让我开心。我非常抱歉打扰和偷走这个BS的时间:(

＆＃39;发送＆＃39;按钮保持有效且条件不满意

2 个答案: