CODEWITHSUNDEEP
angularjsangularjs-scope
iamjonesy
iamjonesy

Reputation: 25122

AngularJS bind $scope data to form

I have a $rootScope variable:

$rootScope.register_data = {};

I have a view which contains a form:

<form name="register_data">
    <div class="popup signup">
        <div class="social">
            <a ng-controller="FacebookCtrl" ng-click="login()" href="javascript:void(0)" class="facebook fb-login-button">Sign up with Facebook</a>
            <div class="clear"></div>
        </div>
        <div class="userinfo">
            <div class="left"><input type="text" ng-model="register_data.firstname" placeholder="First Name" tabindex="1" required></div>
            <div class="right"><input type="text" ng-model="register_data.email" placeholder="Email Address" tabindex="4" required></div>

            <div class="left"><input type="text" ng-model="register_data.lastname" placeholder="Last Name" tabindex="2" required></div>
            <div class="right optional"><div class="tip">optional</div><input type="text" ng-model="register_data.dob" tabindex="5" placeholder="DoB (dd/mm/yyyy)"></div>

            <div class="left"><input type="text" ng-model="register_data.phone" placeholder="Phone Number" tabindex="3" required></div>
            <div class="right password"><a href="javascript:void(0)" class="picker">&nbsp;</a><input type="password" ng-model="register_data.password" placeholder="Password" tabindex="6" required></div>
            <div class="clear"></div>
        </div>
        <div class="control">
            <span class="terms">I agree to the <a href="javascript:void(0)">terms &amp; conditions</a></span>
            <a href="javascript:void(0)" id="terms_checkbox" class="checkbox" ng-class="{checked : terms_checked}" ng-click="changeTerms()">&nbsp;</a>
            <a href="javascript:void(0)" class="button" id="register_btn" ng-click="doRegister(register_data)">Sign up</a>
        </div>
    </div>
</form>

The form has a name register_data and each field is bound to that via ng-model. It seems to overwrite my $rootScope.register_data variable as when I update that none of the form controls update. Though if I remove the form name then it works. However i need the form name to do proper form validation.

Anyone know how I can bind the form controls to a scope object but also keep the form validation?

Upvotes: 1

Views: 4246

Answers (1)

zs2020
zs2020

Reputation: 54541

Change the form name to be something else other than the name used as model, since the form controller will be published into related scope, under this name.

Upvotes: 4

Related Questions