1

「ember-validations」プラグインを使用してフォーム検証を追加しています。インライン検証を行うことはできますが、検証ステータスに基づいてボタンを無効/有効にする必要があります。

Component.js

export default Ember.Component.extend(EmberValidations, {
validations: {
    'model.firstName': {
      presence: true,
      presence: { message: 'Please enter valid first name.' }      
    },
    'model.lastName': {
      presence: true,
      presence: { message: 'Please enter valid last name.' }      
    },
    'model.email': {
      presence: true ,
      presence: { message: 'Please enter valid email name.' }     
    },
    'model.department': {
      presence: true,
      presence: { message: 'Please enter valid department name.' }      
    },
}
});

Template.hbs

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-3" for="fname">First Name:</label>
<div class="col-sm-8">
    {{validated-input type="text" placeholder="First Name" value=model.firstName errors=errors.model.firstName}}
 </div>
 </div>
<div class="form-group">
<label class="control-label col-sm-3" for="lname">Last Name:</label>
<div class="col-sm-8">
  {{validated-input type="text" placeholder="Last Name" value=model.lastName errors=errors.model.lastName}}
  </div>
 </div>
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email:</label>
<div class="col-sm-8">
   {{validated-input type="email" placeholder="Email" value=model.email errors=errors.model.email}}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="department">Department:</label>
<div class="col-sm-8">
    {{validated-input type="text" placeholder="Department" value=model.department errors=errors.model.department}}
</div>
</div>
{{#bs-button classNames="table-btn" action=(action "saveAction" model) buttonType="button" type="update"}}Save{{/bs-button}}
</form>

スクリーンショット

ここに画像の説明を入力

ember validationsを使用しているときにフォーム入力の合計検証ステータスを取得して、そのフラグを無効/有効ボタンに使用できるようにするにはどうすればよいですか?

4

1 に答える 1

2

ember-validations docsを見る：

user.validate().then(function() {
  // all validations pass
  user.get('isValid'); // true
}).catch(function() {
  // any validations fail
  user.get('isValid'); // false
}).finally(function() {
  // all validations complete
  // regardless of isValid state
 user.get('isValid'); // true || false
});

計算されたプロパティのエイリアシングを設定できると思いますyourModel.get("isValid")：

// in your controller or component:
isSaveButtonDisabled: Ember.computed.not("user.isValid")

そして、あなたのテンプレートで：

...
</div>
{{#bs-button classNames="table-btn" disabled=isSaveButtonDisabled action=(action "saveAction" model) buttonType="button" type="update"}}Save{{/bs-button}}
</form>

bs-buttonforの構文が何であるかわかりませんdisabled=isSaveButtonDisabled。

于 2016-03-25T09:13:10.457 に答える