Custom component not showing error until save is clicked about ember-validated-form

[g8anusha]

Sorry, some issue with the twiddle. Twiddle not saving my code. Please find the template code.

{{#validated-form
	model=(changeset model UserValidations)
  on-submit    = (action "submit")
  submit-label = 'Save' as |f|}}

  {{f.input label="First name" name="firstName"}}
  {{#f.input label="Last name" name="lastName" as |fi|}}
    {{textarea name="lastName" onupdate=fi.update onhover=fi.setDirty
  {{/f.input}}
  {{f.submit label="Save" disabled=f.model.isInvalid}}

{{/validated-form}}

[czosel]

Hi @g8anusha,

the key to achieving this behaviour is calling fi.setDirty when your component goes out of focus. Getting this right can sometimes be tricky because how the event is triggered depends on the component you're using: onhover is for example just used in our demo app and won't work with textareas. When you're using the ember {{textarea}} you'll have to use input and focusout (see ember docs), with a native <textarea> it would be oninput and onblur.

I created a twiddle with a working demo.

So, to summarize: It really depends on what kind of custom component you're using. Textareas might not be a perfect example since we support them out of the box anyway. For debugging purposes, I'd recomment to bind you event listener to a custom action to see if it actually gets fired before changing it to call fi.update or fi.setDirty.

Hope that helps!

PS: My current workflow with ember twiddle is to name the twiddle, then hit File > save to GitHub Gist, and finally open the current page in a new Tab to see if everything actually has been saved.

[g8anusha]

Worked like magic! Thanks a lot! 💯