Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Passed in form component not updating correctly #188

Open
jrock2004 opened this issue Nov 9, 2019 · 3 comments
Open

Passed in form component not updating correctly #188

jrock2004 opened this issue Nov 9, 2019 · 3 comments

Comments

@jrock2004
Copy link

So I have an ember app of 3.12 and I just ran the code mod to also convert to angle brackets. I have one file that it did not fully convert. Not sure if it should of just skipped or if there was a way for it to do this correctly. I have the following code that is passing a yielded component to another component

<BsForm @formLayout="vertical" @class="bootstrap-form" @showAllValidations={{true}} @novalidate={{true}} @model={{model.customer}} @onSubmit={{action "saveChanges"}} as |form|>

  <MobilePhone
    @form={{form}}
    @model={{model.customer}}
    @mobilePhoneCarriers={{model.mobilePhoneCarriers}}
    @requireMobilePhoneCarrier={{model.requireMobilePhoneCarrier}}
    @isNanpa={{isNanpa}} 
  />

</BsForm>

In that component the code mod converted it to this

<form.element @label="Your mobile phone number" @placeholder="Mobile phone" @property="cellPhone" @id="phone-div" @required={{true}} @useIcons={{false}}>

</form>

But it should be

<@form.element @label="Your mobile phone number" @placeholder="Mobile phone" @property="cellPhone" @id="phone-div" @required={{true}} @useIcons={{false}}>

</@form>

The way I discovered the problem in the first place was ember s blew up with the following error

Compile Error: <form.element> is not a component and doesn't support block parameters

Thanks

@rwjblue
Copy link
Member

rwjblue commented Nov 11, 2019

Thank you for reporting! Would you mind sharing the original template invocation for this the template that was invoking form.element?

@jrock2004
Copy link
Author

Here is the code of the call of the component

{{mobile-phone
  form=form
  model=model.customer
  mobilePhoneCarriers=model.mobilePhoneCarriers
  requireMobilePhoneCarrier=model.requireMobilePhoneCarrier
  isNanpa=isNanpa}}

Here is the component template code

{{#form.element label="Your mobile phone number" placeholder="Mobile phone" property="cellPhone" id="phone-div" required=true useIcons=false}}
  {{one-way-input-mask
  model.cellPhone
  mask=phoneMask
  placeholder="Mobile phone"
  extensions=false
  class="form-control"
  id="phone"
  type="tel"
  options=(hash showMaskOnHover=false greedy=false)
  update=(action "updateCellPhone")}}
{{/form.element}}

Is this what you were looking for?

Copy link
Member

rwjblue commented Nov 11, 2019

Yep, thats it exactly, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants