Dynamic multiple forms and handling ng-model for each AngularJS

Question

I have a page where you could dynamically add a form but what I want to do is to have each one of them as a different object. Right now when I add a new form and I fill in the input fields its reflected in the other forms too, but I want the application to treat each form as a separate entity. How will I be able to achieve this? My code is as follows:

HTML

<form name="referenceForm" ng-controller="ReferenceController as rfcCtrl" novalidate>
          <md-card ng-repeat="reference in rfcCtrl.references track by $index" class="job-profile-card flex" ng-click="jobCtrl.browseMatches(job)">
               <md-button ng-disabled="rfCtrl.references.length==0" ng-click="rfcCtrl.add(reference)" class="md-fab md-fab-bottom-right docs-scroll-fab job-profile-fab" aria-label="FAB">
                 <md-icon ng-bind="'add'"></md-icon>
               </md-button>
                 <div layout="column" layout-align="space-around center">
                    <div class="flex">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label style="color:white">Name</label>
                        <input ng-model="rfcCtrl.ref.name" style="color:white" md-maxlength="30" ng-required="true">
                        <div style="color:white" class="hint" ng-if="showHints">Tell us what we should call you!</div>
                        <div style="color:white"  ng-if="!showHints">
                        <div style="color:white" ng-message="required">Name is required.</div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-block" flex-gt-sm>
                    <label style="color:white">Phone Number</label>
                    <input name="phone" ng-model="rfcCtrl.ref.phone" ng-required="true">
                    <div style="color:white" class="hint" ng-show="showHints">(###) ###-####</div>
                    <div style="color:white" ng-messages="referenceForm.phone.$error" ng-hide="showHints">
                    <div style="color:white" ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
                    </div>
                    </md-input-container>
                    </div>
                </div>
          </md-card>
                <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
                 <md-button ng-disabled="referenceForm.$invalid" ng-click="rfcCtrl.submit()" class="submit" type="submit" layout="row" layout-sm="row" layout-align="center center" layout-wrap text-align="center">Submit</md-button>
                </section>
      </form>

Javascript

function ReferenceController(referenceService, $scope, $location,$cookies) {
    var reference;
    let vm = this;
    vm.references = [reference];


     vm.ref = {
        'name': "",
        'phone': ""
    };



     vm.add=function(reference){
        vm.references.push({reference});
       }


    vm.submit = function () {

        referenceService.postReferences(vm.ref).then(function (data) {
                $location.path("/userType")
            },
            function () {
                alert("There is an error processing your request!")
            })
    };

}

Any help would be appreciated. Thank you!!

did you try ng-form instead of form ?

Binod Gurung
– Binod Gurung

2017-08-10 15:31:46 +00:00
Commented Aug 10, 2017 at 15:31 — Binod Gurung
– Binod Gurung, Commented Aug 10, 2017 at 15:31

Mike Feltman · Accepted Answer · 2017-08-10 15:24:18Z

1

You want to use the reference variable you are creating in your ng-repeat to set ng-model. The way you are doing binding right now you are binding to the same object for each iteration.

<md-input-container >
    <label style="color:white">Name</label>
    <input ng-model="reference.name" style="color:white" md-maxlength="30" ng-required="true">
</md-input-container>

answered Aug 10, 2017 at 15:24

Mike Feltman

5,1761 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic multiple forms and handling ng-model for each AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related