条件が満たされていない間に[送信]ボタンが有効のままになる

Question

Ember.jsを学んでいて、今はちょっとしたお問い合わせフォームがついています。私は2つのフィールドを持っています.1つは電子メール用、もう1つはメッセージ用です。検証が満たされない限り、[送信]ボタンを無効にする必要があります。また、すべてがOKで、ユーザーがメッセージを送信した場合は、メッセージが送信されたというフラッシュ通知でフォームを置き換える必要があります。

アプリ/コントローラ/ 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

私は注意の悪名高い欠如を示してきたように、私を否決すること自由に感じなさい - app/controllers/contact.jsのふりをしたコードはapp/routers/contact.jsにありました。自然に、正しい場所に移動したら、すべてがうまくいきました。私を啓発した@Paragに特別なおかげです。私はひどくこのBSのための時間を邪魔して盗むためにひどく残念です:(

Answer 2

あなたは、フォームの名前だけでなく、NG-無効を使用する必要があります。DEMO

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