mardi 15 mars 2016

Display validation in ember modal using ember-model-validator

I'm trying to validate the model before before saving it the server by using ember-model-validator, but I'm a bit stuck on how should I display the validation errors to my template. Here's my sample code for my template, can somebody take a look on what I am missing.

{{#bs-modal open=openModal title=(if editModal (concat "Edit " model.documentCode) "Add new record") body=false footer=false autoClose=false}}
   {{#bs-modal-body}}
     {{#bs-form model=this action=(action "addEditSalesOrder"  editModal model)}}
     <div class="container-fluid">
            <div class="col-md-5">
                    {{bs-form-element controlType="text" label="Bill To State" property="model.billToState"}}
                    {{bs-form-element controlType="text" label="Bill To Postal Code" property="model.billToPostalCode"}}
                    {{bs-form-element controlType="text" label="Ship To" property="model.shipToName"}}
                    {{bs-form-element controlType="text" label="Ship To Address" property="model.shipToAddress"}}
                    {{bs-form-element controlType="text" label="Ship To City" property="model.shipToCity"}}
                    {{bs-form-element controlType="text" label="Ship To State" property="model.shipToState"}}
                    {{bs-form-element controlType="text" label="Ship To Postal Code" property="model.shipToPostalCode"}}
            </div>
      </div>
     </div>
     {{/bs-form}}
   {{/bs-modal-body}}
   {{bs-modal-footer closeTitle="Cancel" action=(action "closeModal" model) submitTitle="Ok"}}
{{/bs-modal}}

My model

import DS from 'ember-data';
import Validator from '../mixins/model-validator';

export default DS.Model.extend(Validator,{
  billToName: DS.attr(),
  billToAddress: DS.attr(),
  billToCity: DS.attr(),
  billToState: DS.attr(),
  billToPostalCode: DS.attr(),
  shipToName: DS.attr(),
  shipToAddress: DS.attr(),
  shipToCity: DS.attr(),
  shipToState: DS.attr(),
  shipToPostalCode: DS.attr(),


  validations:{
    billToName:{
      presence:true
    },
    billToAddress:{
      presence:true
    },
    billToCity:{
      presence:true
    },
    billToState:{
      presence:true
    },
    billToPostalCode:{
      presence:true
    }
  }
});

Then, the important flow in my controller is below code:

if(this.model.validate())
            {
                this.set('openModal',false);    
            }
            else
            {

                //errors -> declared property in my controller
                this.set('errors', true);
                this.set('openModal',true); 
                console.log(this.get("errors"));
            }

So the question is how can I bind the errors properly to each input field whenever the model is invalid, What I'm trying to achieve is to make it behaves like the ember-validation behaviour.

Can someone guide me on what am I doing? I'm confused on how can I accessed the errors to template, and how to determine if that error is the error for this/that field. Hope someone understand what I'm trying to point out.




Aucun commentaire:

Enregistrer un commentaire