On my webpage, I have the ability to dynamically add forms. However, I want each form to be treated as a separate entity instead of reflecting changes across all forms. How can I achieve this separation in my application? Below is the code snippet:
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!")
})
};
}
If anyone has suggestions on how to accomplish this task, please share. Thank you!!