ember-cp-validations form error message not showing

748 Views Asked by At

I am trying to validate input in a form using ember-cp-validations. The actual validation itself seems to be working, however I cannot get the error message to show on the template. I am fairly new to ember in general, and I am assuming that I am not correctly using the model in the v-get helper.

Here is my model:

import DS from 'ember-data';
import { validator, buildValidations } from 'ember-cp-validations';

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

export default DS.Model.extend(Validations, {
    name: DS.attr('string'),
});

Here is the action I am running in my controller when the form is submitted:

//tried to get character model here to make validation work
let character = this.get('model');

//create new character record to store
let newCharacter = this.store.createRecord('character', {
    name: name,
});

//validating here
newCharacter.validate()
    .then( ({validations}) => {
        console.log(validations)
        if(validations.get('isValid')) {
            console.log('form is valid')
            //record will be saved here
        }else{
            console.log('form is invalid')
        }
    })

In this action when the name field is empty it does say that the form in invalid as expected.

Lastly, I attempt to show the error here:

{{input type="text" class="form-control" value=name placeholder="Character Name" focus-out=(action (mut showNameError) true)}}
  {{#if showNameError}}
    <div class="error">
      {{v-get character 'name' 'message'}}
    </div>
  {{/if}}

The div is created here when you lose focus on the field, but the message never shows. From what I understand, the arguments for the helper here should be the model, the field you are validating, and then the message that is to be displayed. The fact that it knows the form is invalid, but the message never shows leads me to believe that I am misunderstanding something and not actually accessing the character model correctly in the v-get helper.

After reading around, and watching some tutorials on ember-cp-validations I still seem to be stuck. Any help would be appreciated.

Thanks in advance!

EDIT: I wanted to add some more information after trying for another several hours to solve this problem. I created a new action in my controller extremely similar to the example from the ember-cp-validations github page located here:

https://github.com/offirgolan/ember-cp-validations/blob/7433fdb2ce7d22f956ca97a9b3291fe9c6637446/tests/dummy/app/controllers/index.js

I have also made sure that I am importing and defining all of the necessary information in my model file. I have made it to look exactly like their example here:

https://github.com/offirgolan/ember-cp-validations/blob/7433fdb2ce7d22f956ca97a9b3291fe9c6637446/tests/dummy/app/models/user.js

When I run the action however, I am given the error model.validate is not a function. I do not understand why in their example they would be able to run validate on their model, but I would not be able to on mine. The more I try to resolve this, the more confused I become.

0

There are 0 best solutions below