javascript - 当条件不满足时，“发送”按钮保持事件状态

Question

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

app/controllers/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>

但是，仍然:

1. 当表单为空时，按钮保持事件状态。
2. 填写表单时不会出现任何字形图标。
3. 发送消息时不会出现任何通知。

我做错了什么？

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>