This.get('property') undefined because component

So in my controller, I have an action when the user submits a form. It has code like this in it:


However this returns undefined because the form is inside a component so it’s out of the scope. My controller points to this view:

{{#popup/popup-modal title='New Contract' identifier='addContractModal' redirect='contracts' rules=rules model=model}}
  {{#validated-form rules=rules model=model}}
    {{partial "forms/contract"}}

    <div class="text-right">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      <button {{action "create"}} class="btn btn-primary">Create</button>

So I have a component for popup modals and then validated forms (so I can perform validation on a form). They are all reusable components… but now inside the form, I have code like this:

{{input value=model.fname name='fname' class='form-control' id='fname'}}

fname is there… but it doesn’t get updated on the controller because it’s inside a component… when this is out of the component and straight in the view, it updates on the controller. Now I know I could pass fname=fname into the two components, but for each property? That’s going to look horrendous.

How do I make sure all properties are being passed down into these components? The components won’t know the names of these properties so I can’t just detect a change in the component on the property name…

I never knew how to do this… and it’s starting to get me stuck on a lot of areas in the application I’m developing.

Thank you for any help/suggestions.

Can you not remove topics on here? I tried doing this.get('model.propertyName') and it wasn’t working, but now it is… after a double refresh… Wish I could remove the topic! Sorry about this!