CODEWITHSUNDEEP
javascripthtmlangularjs
Nick
Nick

Reputation: 39

Form control with angular.js

I have been playing about with angular and forms but I am having some trouble with the code below. I thought that it should add forenames to the ones already displayed by the ng-repeat whenever the form is submitted but the submit button appears to do nothing.

HTML:

<!DOCTYPE html>
    <html lang="en" ng-app="file">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
        <script types="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script types=text/javascript" src="formLoops.js"></script>
        <title>Title</title>
    </head>
    <body ng-controller="PersonalDetailsController as person">
        <p ng-repeat="info in person.details">{{info.forename}}</p>

    <form name="PersonalDetailsForm" ng-controller="DataEntryController as dataCtrl" ng-submit="addPerson(person)">
        <blockquote>
            <p>{{dataCtrl.person.forename}}</p>
            <p>{{dataCtrl.person.surname}}</p>
        </blockquote>

        <label>Forename:</label>
        <input ng-model="dataCtrl.person.forename"/>
        <label>Surname:</label>
        <input ng-model="dataCtrl.person.surname"/>
        <input type="submit" value="submit"/>

    </form>

    </body>
    </html>

JS:

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

app.controller("PersonalDetailsController", function() {
  this.details = personalDetails;
});

app.controller("DataEntryController", function() {
  this.person = {};
  this.addPerson = function(person) {
    person.personalDetails.push(this.person);
  };
});

var personalDetails = [{
    forename: "John",
    surname: "Doe"
  },
  {
    forename: "John",
    surname: "Smith"
  }
];

Upvotes: 0

Views: 84

Answers (3)

Prince Gracy
Prince Gracy

Reputation: 121

You need to do two changes to the code

1) In HTML you need to add the ng-submit="dataCtrl.addPerson(person)" since you are using the controller as syntax 2) You need to change your js code as follows person.personalDetails.push(this.person); to person.details.push(this.person);

This is because your repeat is working with the details array so you need to push the new data to the details array itself. You are trying to push the data inside the global array that is why it is not worked

Thanks

Upvotes: 1

Igor Dimchevski
Igor Dimchevski

Reputation: 452

You will need to find a way of sharing data between controllers. One of the ways is using an angular service.

Check out this plunk! https://plnkr.co/edit/oimKIgCDKknwsmSWbUsT?p=preview

script.js

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

app.controller("PersonalDetailsController", function(PersonService) {
this.details = PersonService.personalDetails;
});

app.controller("DataEntryController", function(PersonService) {
this.person = {};

this.addPerson = function(person) {
    PersonService.personalDetails.push(this.person);
};
});

app.service("PersonService", function() {
this.personalDetails = [{
    forename: "John",
    surname: "Doe"
}, {
    forename: "John",
    surname: "Smith"
}];
});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="file">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script types="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script types="text/javascript " src="script.js"></script>

    <title>Title</title>
</head>

<body ng-controller="PersonalDetailsController as person ">
    <pre>
            {{person | json}}
        </pre>
    <p ng-repeat="info in person.details ">{{info.forename}}</p>

    <form name="PersonalDetailsForm " ng-controller="DataEntryController as dataCtrl " ng-submit="dataCtrl.addPerson(dataCtrl.person) ">
        <pre>
            {{dataCtrl.person | json}}
        </pre>

        <label>Forename:</label>
        <input ng-model="dataCtrl.person.forename " />
        <label>Surname:</label>
        <input ng-model="dataCtrl.person.surname " />
        <input type="submit " value="submit " />

    </form>

</body>

</html>

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

since you are using the controllerAs use the controllerAs reference when you are calling the function. like ng-submit="dataCtrl.addPerson(person)" 

<form name="PersonalDetailsForm" ng-controller="DataEntryController as dataCtrl" ng-submit="dataCtrl.addPerson(person)">

Upvotes: 0

Related Questions