Form control with angular.js

Question

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"
  }
];

Prince Gracy · Accepted Answer · 2017-06-08 11:13:20Z

1

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

answered Jun 8, 2017 at 11:13

Prince Gracy

1214 bronze badges

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

1 Comment

Nick Over a year ago

Great. That did it! Thanks for this and the explanation; this has been a massive help.

Sachila Ranawaka · Accepted Answer · 2017-06-08 08:28:35Z

0

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)">

answered Jun 8, 2017 at 8:28

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

5 Comments

Nick Over a year ago

Thanks, sorry but I have made that change and it does not seem to work...

the_mishra Over a year ago

it should be like this ng-submit="dataCtrl.addPerson(dataCtrl.person)

Nick Over a year ago

Still nothing. Sorry.

Vivz Over a year ago

I think you have to add the personDetails array inside the scope of PersonalDetailsController

Nick Over a year ago

Sorry, I am very new to angular and my JS is basic; I tried what I think you meant by this and it stopped displaying the forenames at all. Any chance I could have an example?

Igor Dimchevski · Accepted Answer · 2017-06-08 11:04:14Z

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>

Collectives™ on Stack Overflow

Form control with angular.js

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related