Finished Paper Form Component

[shoxter]

Usage like this:

{{#paper-form parentSubmit=(action 'useless') as |form|}}

         {{form.input value=foo onChange=(action (mut foo)) label="Foo" required=true}}
         {{form.input value=bar onChange=(action (mut bar)) label="Bar"}}

         {{#paper-button primary=true raised=true onClick=form.submit disabled=form.isInvalid}}Button{{/paper-button}}

{{/paper-form}}

Different Options:

• form.input: Paper inputs inside of the form.
• parentSubmit: The action in the parent component/controller to execute (clear fields, create/save records, etc) with regards to the form prior to the form component resetting the isTouched property on all of the inputs.
• form.submit: This should be the onClick method for the intended submit button for the form.
• form.isInvalid: This is the property that the form changes as the form's inputs change their validity state. When the inputs are invalid, this will be true and should disabled the form's intended submit button.

The form looks at all the form.inputs with input constraints for invalidity.

Please post any questions. We can create a page on the dummy app to cover the documentation for this component once we cover any questions that should be included.

[miguelcobain]

Should I consider this PR or #406 ?

[shoxter]

@miguelcobain Both of them.

Multiple input validation in a form setting wasn't possible without the fix to inputs in #406.

I first had to fix the inputs to not send separate isInvalid calls for both 'NULL' and 'TRUE' values.

It was effectively double registering the invalid state of the input. #406 fixes that and this is the form component.

[DanChadwick]

Maybe we should have isValad so null is better aligned with false.

[miguelcobain]

return condition ? true : false; is equivalent to return condition;

[miguelcobain]

destructure computed

[miguelcobain]

can't you work around the touchedTrigger by using _isTouched instead of isTouched on the templates?

[shoxter]

@miguelcobain No because the value will never change in the parent component. The form is never going to set isTouched = true. So oldAttrs will always = newAttrs and will never execute. Unless I call a this.set('isTouched', true) then this.set('isTouched', false) which is more hacky than this solution.

The tests fail with that proposed solution (unless I do the true to false hack).

[miguelcobain]

Can you edit this twiddle to reproduce that problem?
https://ember-twiddle.com/5d15b9f7ad4092d7bfabc718751c2137?openFiles=components.my-component.js%2Ctemplates.components.my-component.hbs

[shoxter]

@miguelcobain https://ember-twiddle.com/5d15b9f7ad4092d7bfabc718751c2137?openFiles=controllers.application.js%2Ctemplates.components.my-component.hbs

[miguelcobain]

How do I reproduce?

[shoxter]

@miguelcobain It didn't save for whatever reason.

This is the right one: https://ember-twiddle.com/d7bc618f48a24a89e1bd9411c0d49050/91f4de4c453bcbe8650134d9d72c026ead80cf45?openFiles=controllers.application.js%2C

1.) Toggle controller.
2.) Toggle component.
3.) Toggle controller again.

[miguelcobain]

We can use computed.not here

[shoxter]

Done.

[miguelcobain]

Please read docs on computed.not. it doesn't take a callback

[shoxter]

Sorry about that. I was in a rush out the door. I'll fix it when I get back.

[dustinfarris]

If I want to use a custom paper-input component, is there an easy way to plug that in here?

[shoxter]

{{#paper-form as |form|}}
  {{custom-paper-input parentComponent=form}}
{{/paper-form}}

[DanChadwick]

@dustinfarris: I agree. Any component yielded should be created from an attribute. Contextual components tightly couple. 👎

[shoxter]

@DanChadwick The paper-input is an attribute of the contextual component because it's the most common input yielded in the form.

It's impossible to take into account all possibilities in the contextual component (which I think is what you're saying), but you can make any paper-input based component a part of the form by adding parentComponent=form inside of the form component.

[dustinfarris]

@shoxter thanks for that example. what if i'm using an intermediary component that proxies to paper-input? e.g. my usage here poteto/ember-changeset#59 (comment)

do i pass parentComponent down the chain? or just to the first component? is this officially supported?

[shoxter]

@dustinfarris No problem.

The reason parentComponent=form works is because the form looks at all children components (components that you've specified that their parent is the form) for isInvalid.

isInvalid is a property of paper-input, so unless your proxy component has a property that aliases the isInvalid property of the paper-input in your template, you'll need to have it on the paper-input.

Make sense?

PS: Please note that the only reason parentComponent=form means anything and why the form can see it as a child is because of the mixin that we've extended into the paper-input.

[dustinfarris]

@shoxter i think so, i'm just wondering how this will work with an intermediary component (i guess i'll find out soon enough!)

e.g.

my-route.hbs

{{#paper-form as |form|}}
  {{x-paper-input parentComponent=form}}
{{/paper-form}}

x-paper-input.hbs

{{paper-input parentComponent=parentComponent}}

[miguelcobain]

@dustinfarris x-paper-input extends paper-input?

Edit: i see it doesn't. If it did, there is a way to make this work without contextual components.

[miguelcobain]

@dustinfarris should be fixed with 35d457f