Issues validating forms from Yoember tutorial

Learning Team
1

Hi guys, I am following Yoember tutorial from @zoltan and I am stucked at contact page form validation exercise… :confused:

I set up an Ember Twiddle with my bad attempt (commented) to achieve it with no luck.

Any help to make me understand how to solve the homework would be really appreciated. Thanks you all.

1 Like
2

Hi,

Update your controller as follow :

But, In future use ember validation plugin. :slight_smile:

 export default Ember.Controller.extend({
  message: '',
  isValidEmail: Ember.computed.match('emailAddress', /^.+@.+\..+$/),
  //isDisabled: Ember.computed.not('isValidEmail'),
  
  // MY FAILING ATTEMPT TO GET MESSAGE LENGTH
   //isValidMessage: Ember.computed('message', function () {
     //return this.get('messageTes').length > 5;
   //}),
   //isValidMessage: Ember.computed.gte('messageLength', 5),
  isDisabled: Ember.computed('isValidEmail', 'message', function() {
    let email = this.get('isValidEmail'),
    msg = this.get('message');
    if(msg.length > 5 && eml) {
    		return false;
    } else {
    		return true;
    }
  }),

Let me know if u stuck again. It’s really good tutorial.

Thanks

2 Likes
3

Your were quite close with your attempt, you almost found the solution. Great job. And you already got a great working implementation.

We can simplify it further with ember computed macros and with some ES6 magic:

import Ember from 'ember';

const {
  Controller,
  computed: { match, gte, and, not },
  run: { later }
} = Ember;

export default Controller.extend({

  isValidEmail: match('emailAddress', /^.+@.+\..+$/),
  isValidMessage: gte('message.length', 5),
  isValidForm: and('isValidEmail', 'isValidMessage'),
  
  isDisabled: not('isValidForm'),
  
  actions: {
    
    saveInvitation() {
      
      alert(`Saving of the following email address is in progress: ${this.get('emailAddress')}`);
      this.set('responseMessage', `Thank you! We've just saved your email address: ${this.get('emailAddress')}`);
      this.set('emailAddress', '');
      
      later(() => this.set('responseMessage', ''), 3000);
    }

  }  
});
  • The ES6 magic helps to save a few keystroke, we don’t have to write so many times Ember.computed. :wink:
  • We can use message.length as a property.
  • We need that interim isValidForm what we can negate for isDisabled.
  • Please note, however the setTimeout() works in Ember, there is a built in function for this type of async calls, Ember.run.later, which works together with Ember special runloop. (But don’t worry too much about it at this stage, you can investigate further, when you know more about the framework.)

Hope you enjoy learning Ember. :slight_smile:

2 Likes
4

The ES6 magic helps to save a few keystroke, we don’t have to write so many times Ember.computed. :wink:

This alone made my day… :smile: ! Deconstructing is easy to get but not that easy to apply in real world code. That, instead is a very smart way of using it. Once read about it I found this “ES6 Overview in 350 Bullet Points”

About the code, it was not clear I could pass the length property of the message string “as a string” to the function. I thought the “object” name was a string then converted to an object by reference. I didn’t expect it to be evaluated later in the code “as is”.

About your course, really thanks a lot. It’s awesome as a primer to Ember. I really appreciate your effort and time spent to write it and keeping it update.

I was in Wellington a couple of years ago, if I knew you, you had got a beer already. :slight_smile:

1 Like