Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to validate nested fields on submit? #172

Open
felipekoblinger opened this issue Sep 10, 2017 · 1 comment
Open

How to validate nested fields on submit? #172

felipekoblinger opened this issue Sep 10, 2017 · 1 comment
Assignees
Labels

Comments

@felipekoblinger
Copy link

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 felipekoblinger changed the title How to validate nested fields when submit? How to validate nested fields on submit? Sep 10, 2017
@GCorbel
Copy link
Contributor

GCorbel commented Sep 12, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants