Ember paper - need some help

1

Hi, I’m just beginning with ember so some things are not completely clear to me. I’m using ember paper GitHub - miguelcobain/ember-paper: The Ember approach to Material Design. and don’t know how to do two things:

  1. I need to create a validation rule to check if input password and input repeatPassword are equal
  2. When I submit the form and clear the inputs via this.set(‘newUser’, {}) the validation messages appear - Required field or At least X characters… but it shouldn’t.

I really appreciate your help, thanks

2

Hi @erzzo! Welcome to the Ember Community! It’s great to have you.

I am going to assume that you are using ember-paper@0.2.12. One approach for your scenario is to use a custom validation property on {{paper-input}} that checks if anything is defined for the password as a part of the validation logic:

Template

{{paper-input value=password}}
{{paper-input value=repeatPassword customValidation=hasMatchingPasswordError}}

Controller

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Controller.extend({
  newUser: computed(function(){
    return Ember.Object.create({
      password: null
    })
  }),
  password: computed.alias('newUser.password'),
  repeatPassword: null, // initial value
  hasMatchingPasswordError: computed('password', 'repeatPassword', function() {
    let password = this.get('password'),
        hasError = false;
    hasError = (password && password !== this.get('repeatPassword'));
    return {
      'errorMessage': 'Passwords do not match',
      'isError': (input) => {
        return hasError;
      }
    };
  })
});

If you have any other questions, feel free to reach out to us in the #ember-paper channel in Ember’s Slack community: https://ember-community-slackin.herokuapp.com/

3

Thanks a lot @mellatone, it works and I know now how to do such things. And the second question? After submit I need to clear the form but all required error messages appearing.

4

Have you tried setting the newUser back to its initial state?

5

Yes, but It throws errors because of the input validators. But I found a way to hack it, the forms itself does not have a function to do that. But I use now a different library and all is working well.