So in my controller, I have an action when the user submits a form. It has code like this in it:
this.get('propertyName')
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>
</div>
{{/validated-form}}
{{/popup/popup-modal}}
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.