jqxValidator and ng-model

[msmithParticipant]

I have a form element:

<form jqx-validator jqx-settings="newLocationValidationSettings" id="newLocationForm">
<div >
<jqx-input jqx-width="350" jqx-height="25" ng-model="newLocation.name" name="name"></jqx-input>
</div>
</form>

in my controller I have

$scope.newLocation = {
name : 'Foo'
}

WHen rendered, the jqx-input field is not populated with the value of $scope.newLocation.name.
When I remove the jqx-validator and jqx-settings from the form tag, the jqx-input field is populated from the model in scope.

Is there anything special that needs to happen with input fields attributed with ng-model inside a jqx-validator widget?

[Peter StoevKeymaster]

Hi msmith,

Each widget as an reusable component is in isolated scope. This basically means that your jqxInput is in the scope of jqxValidator and it does not know about your newLocation.name. There is an attribute used in several demos which is called jqx-data. You can use it to perform binding i.e set the jqx-data in the jqxValidator’s form to newLocation and in the jqx-input, set the ng-model=”data.name”.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[msmithParticipant]

Thanks Peter.

That did the trick!
I figured it had to do with scope, but couldn’t see anywhere in docs to bind data to the validator’s scope.

Mark

[Author]

Posts