Binding repeatable form subset to model

Question

On a registration form I allow a user to enter zero or more phone numbers. Each phone number consists of a prefix and a number, these are two fields per phone number. The user may decide how many numbers he wants to provide, the add more numbers link would clone this part of the form.

Prefix: [_______]
Number: [_______]
+ add more numbers

The model I bind to is fixed and should be this format:

$scope.model = {
    "...main inputs": "username, etc...",
    phoneNumbers: [
        // for each phone number I expect this object
        { "prefix": "+1", "number": "123123123" }
    ]
};

I am not sure how I should set up my ng-model for these text inputs to have these objects generated within the array.

Also, I am a great fan of referential binding and limiting things like scope watch and event-based changes to the scope, as often these changes go unnoticed for other directives that may be using this value (unless being watched). Basically that means it is my intention to have dynamic generation of objects within the array as the form is filled in with numbers, or dynamic removal of objects within the array as numbers are removed or both inputs left empty.

The array should only contain valid and filled objects, partially filled objects or empty objects should not be added to the model or array (as usually is done with properties with invalid values -- those properties get removed from the model object). Basically a push to the array with every validated object, and removal (slice) of objects for every invalid object. But then rather automatically, instead of writing a push/slice function.

Could you get it now?.... – parthicool05 Aug 13 '14 at 12:39 — parthicool05, Aug 13 '14 at 12:39

parthicool05 · Answer 1 · 2014-08-14T03:59:30.657

Hi try out this code:

Html:

 <form name="form">
                 <div data-ng-repeat="phone in phoneNumberArray">
                    <div class="form-group">
                        <label for="inputFirstName">Prefix</label>
                        <input id="prefix" class="form-control" type="text" ng-model="phone.prefix">
                    </div>
                    <div class="form-group">
                        <label for="inputLastName">Phone number</label>
                        <input id="phoneNumber" class="form-control" type="text" ng-model="phone.phoneNumber">
                    </div>   
                     </div>                                          
                </form>    
             <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Add more number" data-ng-click="addmore()"/>
              </div>

Controller:

    $scope.phoneNumberArray = [
    {
        prefix: "",
        phoneNumber:"",
    }];

    $scope.addmore = function () {
        $scope.phoneNumberArray.push({
            prefix: "",
            phoneNumber: "",
        });
    }

Hi check this demo in Fiddle

This works, but will fill the array with an empty (or valueless) object if the fields are left empty. — KrekkieD, Aug 13 '14 at 13:15
I think your question the value object will push into another array that's right.. — parthicool05, Aug 13 '14 at 13:37
The array should contain only valid objects. If three form subsets are open, but only one subset is valid, the array length should be 1, containing a single valid object. — KrekkieD, Aug 13 '14 at 13:54

score 0 · Answer 2 · answered Nov 17 '14 at 04:15

Use the following code.....

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app ng-controller="todoCtrl">

                <form name="form" ng-submit="addmore()">
                    <div class="form-group">
                        <label for="inputFirstName">Prefix</label>
                        <input class="form-control" type="text" ng-model="phone_prefix"/>
                    </div>
                    <div class="form-group">
                        <label for="inputLastName">Phone number</label>
                        <input class="form-control" type="text" ng-model="phone_Number"/>
                    </div>  

                    <div class="form-group">
                            <input type="submit" class="btn btn-primary" value="Add more number"/>
                    </div>                  
                </form>   

                <div ng-repeat="phone in phoneNumberArray">
                     {{ phone.prefix + " "+ phone.phoneNumber}}
                </div>  


<script>

function todoCtrl($scope) {
debugger;
    $scope.phoneNumberArray = [
    {prefix: '14', phoneNumber:'123'}
    ];

    $scope.addmore = function () {
        $scope.phoneNumberArray.push(
        {prefix: $scope.phone_prefix, phoneNumber: $scope.phone_Number}
        );
    }
    }
</script>

</body>
</html>

Binding repeatable form subset to model

2 Answers2