ember-rapid-forms icon indicating copy to clipboard operation
ember-rapid-forms copied to clipboard

How to validate nested fields on submit?

Open felipekoblinger opened this issue 8 years ago • 1 comments

Hello! I'm trying to validate fields on submit click to show errors. But it only validate the main model, it associated fields do not. But the nested fields show the errors individually by events.

screen shot 2017-09-10 at 18 02 24 screen shot 2017-09-10 at 18 02 41

new.hbs

{{#em-form model=model formLayout="default" as |form|}}
  <div class="row">
    <div class="col-md-12">
      {{form.input property="name" label="Name (Customer Model)" placeholder="Enter a full name..."}}
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      {{#each model.phones as |phone i|}}
        {{em-input cid=(concat "phone-" i) label="Phone (Phone Model - Has Many)" model=phone property="number" }}
      {{/each}}
    </div>
  </div>
{{/em-form}}

customer.js (model)

import DS from 'ember-data';
import DependentRelationships from '../mixins/dependent-relationships';
import { validator, buildValidations } from 'ember-cp-validations';
import InputErrors from 'ember-rapid-forms/mixins/input-errors';
import Helper from 'ember-rapid-forms/mixins/ember-cp-validations-helper';

const { attr, hasMany } = DS;

const Validations = buildValidations({
  name: validator('presence', true)
});

export default DS.Model.extend(DependentRelationships, Validations, InputErrors, Helper, {
  cpf_number: attr('string'),
  name: attr('string'),
  email: attr('string'),
  notes: attr('string'),
  birthday: attr('date'),
  address: hasMany('customer_address', { async: false, cascadeDelete: true }),
  phones: hasMany('customer_phone', { async: false, cascadeDelete: true })
});

customer_phone.js (model)

import DS from 'ember-data';
import { validator, buildValidations } from 'ember-cp-validations';
import InputErrors from 'ember-rapid-forms/mixins/input-errors';
import Helper from 'ember-rapid-forms/mixins/ember-cp-validations-helper';

const { attr, belongsTo } = DS;

const Validations = buildValidations({
  number: validator('presence', true)
});

export default DS.Model.extend(Validations, InputErrors, Helper, {
  type: attr('string'),
  number: attr('string'),
  customer: belongsTo('customer')
});

new.js (route)

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  titleToken: 'Cadastrar',
  breadCrumb: {
    title: 'Cadastrar'
  },
  model() {
    return this.store.createRecord('customer', {
      address: [this.store.createRecord('customer_address')],
      phones: [this.store.createRecord('customer_phone')]
    });
  },
  actions: {
    willTransition() {
      const record = this.controller.get('model');
      if (record.get('isNew')) {
        return this.store.unloadRecord(record);
      }
    },
    newPhone() {
      this.controller.get('model').get('phones').pushObject(this.store.createRecord('customer_phone'));
    }
  }
});

Is something wrong? Or anything I need to setup?

Thanks =)

felipekoblinger avatar Sep 10 '17 21:09 felipekoblinger

Hi and sorry for late answer.

I think this is not really related to ember-rapid-form but more to ember-cp-validations. As you can see here, we only do model.validate(). You have to be sure than errors are set on the relationships with the validate method. I think you can try this method.

Let me know if it solves the problem.

GCorbel avatar Sep 12 '17 10:09 GCorbel