Kör doğrulama değerleriyle form gönderme düğmesini devre dışı bırak/etkinleştir

Question

"ember-validations" eklentisini kullanarak form doğrulamaları ekliyorum. Satır içi doğrulamaları yapabilirim, ancak doğrulama durumuna bağlı olarak devre dışı/etkinleştirme düğmesi kullanmam gerekiyor.

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> 

Ekran

ember validations kullanırken toplam form girdilerinin geçerlilik durumunu nasıl alabilirim, böylece bu bayrağı devre dışı/etkinleştirme düğmesi için kullanabilir miyim?

Answer 1

ember-validations docs baktığımızda:

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

Sana yourModel.get("isValid") aliasing hesaplanan bir özelliği ayarlayabilirsiniz tahmin ediyorum

:

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

Ve sonra şablonunda:

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

Sadece değilim bs-button fo'nun sentaksının ne olduğundan emin değilsin r disabled=isSaveButtonDisabled.