CODEWITHSUNDEEP
javascriptangularjsforms
Haris Bjelic
Haris Bjelic

Reputation: 117

AngularJS binding 2 radio button groups on different models

EDIT:

Based of the modified code of Maher, I will try to explain my problem again. On my HTML Page I have just 1 Form. Inside the form I want to store all fields which are inside #step1 into my account object.

Check please the HTML at < div id="#step1" >

And the fields inside the < div id="#step2" >

I want to store to my staff object.

So and the PROBLEM is, I lose the value of the selected gender from account or staff object. All fields are binded correctly to the objects and are accessable. In #step1 the gender radio is binded to self.account.gender and in #step2 the gender radio is binded to self.staff.gender. But If I try to get the value of the gender in account I got undefined. It looks like that angular override the value of gender if there are more than 2 radio buttons.

An Example. After I fill my form and clicking on submit I want to get like this result:

account object:

staff object:

But I get:

account object:

How do I bind the radios correctly? I want to get per each step a user with his gender and store that information to other objects. Like here account and staff.

 var app = angular.module("app", []);

        app.controller("WelcomeController", function ($scope, $filter) {
            var self = this;
            self.account = {};
            self.staff = {};

            self.bindForm = function() {
                self.staff = self.staff;
                self.account = self.account;
            }

            self.saveStep = function () {
                console.log("staff", self.staff);
                console.log("account", self.account");
            }

        });
<!doctype html>
<html>
<head>
    <title></title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>
<body ng-app="app" ng-controller="WelcomeController as self">

    <div class="container">

        <form name="MyForm" class="col-md-4">
            
            <div id="step1" class="form-group">
                <input class="form-control" ng-model="self.account.firstName" placeholder="firstName"  ng-required="true" />
                <input class="form-control" ng-model="self.account.lastName" placeholder="lastName" ng-required="true" />
                <input class="form-control" ng-model="self.account.street" placeholder="streetName" ng-required="true" />
                <label class="radio-inline">
                    <input name="i-account" type="radio" ng-model="self.account.gender" ng-value="1" ng-required="true">
                    <span class="fa fa-circle"></span> Male
                </label>

                <label class="radio-inline">
                    <input name="i-account" type="radio" ng-model="self.account.gender" ng-value="2" ng-required="true">
                    <span class="fa fa-circle"></span> Female
                </label>
            </div>
      
      
            <div id="step2" class="form-group">
                <input class="form-control" ng-model="self.staff.firstName" placeholder="firstName" />
                <input class="form-control" ng-model="self.staff.lastName" placeholder="lastName" />
                <label class="radio-inline">
                    <input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="1" ng-required="true">
                    <span class="fa fa-circle"></span> Male
                </label>

                <label class="radio-inline">
                    <input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="2" ng-required="true">
                    <span class="fa fa-circle"></span> Female
                </label>
            </div>
            
            <button class="btn btn-success" ng-click="self.saveStep()">finish</button>

        </form>
    </div>
</body>
</html>

Upvotes: 0

Views: 823

Answers (1)

Maher
Maher

Reputation: 2547

Hi, i hope this is what you want & help you to figure out how can bind & transfer ng-models in the angularjs.

I create example as you did in your project, you can run the example please check browser console in the last step. 

 var app = angular.module("app", []);

        app.controller("WelcomeController", function ($scope, $filter) {
            var self = this;
            self.account = {gender: 1};
            self.staff = { gender: 2};

            self.bindForm = function() {
                self.staff = self.account;
            }

            self.saveStep = function () {
                console.log("account", self.account.gender);
                console.log("staff", self.staff);
            }

        });
<!doctype html>
<html>
<head>
    <title></title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>
<body ng-app="app" ng-controller="WelcomeController as self">
  <div class="container">

        <form name="form" class="col-md-4">
            <div class="form-group">
                <input class="form-control" ng-model="self.account.firstName"  placeholder="firstName" ng-required="true" />
                <input class="form-control" ng-model="self.account.lastName" placeholder="lastName" ng-required="true" />
                <input class="form-control" ng-model="self.account.street" placeholder="street" ng-required="true" />
                <label class="radio-inline">
                    <input name="i-account" type="radio" ng-model="self.account.gender" ng-value="1" ng-required="true">
                    <span class="fa fa-circle"></span> Male
                </label>

                <label class="radio-inline">
                    <input name="i-account" type="radio" ng-model="self.account.gender" ng-value="2" ng-required="true">
                    <span class="fa fa-circle"></span> Female
                </label>
            </div>

            <div class="form-group">
                <input class="form-control" ng-model="self.staff.firstName"  placeholder="firstName" />
                <input class="form-control" ng-model="self.staff.lastName" placeholder="lastName" />
                <label class="radio-inline">
                    <input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="1" ng-required="true">
                    <span class="fa fa-circle"></span> Male
                </label>

                <label class="radio-inline">
                    <input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="2" ng-checked="true" ng-required="true">
                    <span class="fa fa-circle"></span> Female
                </label>
            </div>
            <button class="btn btn-primary" ng-click="self.prvStep()">Previous</button>
            <button class="btn btn-success" ng-click="self.saveStep()" ng-disabled="formStep2.$invalid">finish</button>

        </form>
    </div>
</body>
</html>

Upvotes: 1

Related Questions