CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Create a form and add Data throw Angular js but not added?

I m created a new form in my listing and created a form if i fill the data in form and than click to submit button but my data in not added in filled show .

Can u help me please i m new in angular js

My code is here

Angular Js is

// Code goes here

var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function($scope) {
  $scope.items = [{
      "title": "Book",
      "subtitle": [{
        "subtitle": "PanchTantra ",

        "description": "Kids Books",
        "authorName": "Kisna"
      }],
      "description": "Some Book is very Good."
    }, {
      "title": "Mediciane Book",
      "subtitle": [{
        "subtitle": "Pharmacy",

        "description": "This book is related to Docotrs"
      }],
      "description": "This book is very hard"
    }, {
      "title": "Reciape Book",
      "subtitle": [{
        "subtitle": "Khana Khajana",
        "description": "This book is related to Foods"
      }],
      "description": "This book is nice..."
    }, {
      "title": "Computer Book",
      "subtitle": [{
        "subtitle": "BCA MCA",
        "description": "This book is related to Education"
      }],
      "description": "This book is very beautiful."
    }

  ];




  $scope.addnewFormData = function(subtitle, description) {
    if (this.addNewText === '') return;
    $scope.items.subtitle.push({
      subtitle: subtitle,
      description: description
    });
  }

});

HTML COde is 

<body ng-app="myFapp">
  <ul ng-controller="myControler">
    <li ng-repeat="item in items">
      <div>{{item.title}}</div>
      <div>{{item.description}}</div>
      <ul>
        <li ng-repeat="subtitle in item.subtitle">
          <div>{{subtitle.subtitle }}
            <a ng-show="subtitle.authorName" href="#">
              <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}}</a>
          </div>
          <div>{{subtitle.description}} this is</div>
        </li>
        <li>

          <form ng-submit="addnewFormData(addNewText, addBookDescription)">
            <input type="text" ng-model="addNewText" placeholder="Enter Book Name" />
            <input type="text" ng-model="addBookDescription" placeholder=" Enter Book Description here ..." />
            <input type="submit" value="submit" />
          </form>
        </li>
      </ul>
    </li>
  </ul>
</body>

Plunkr link

Upvotes: 0

Views: 49

Answers (2)

Karabur
Karabur

Reputation: 566

in your addnewFormData you are trying to access subtitle field from items array, but you need to access to it from current item

the easiest solution is to add third parameter to addnewFormData and pass current item to it, since actually you have many forms one for each item, and that function doesn't know which item to access.

Something like

$scope.addnewFormData = function(item, subtitle, description){
  if(this.addNewText === '') return ;
  item.subtitle.push({
    subtitle:subtitle,
    description:description
  });
}

and in html:

<form ng-submit="addnewFormData(item, addNewText, addBookDescription)">

Upvotes: 2

Cathal
Cathal

Reputation: 1790

from the docs:

In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of elements, so Angular provides the ngForm directive which behaves identically to but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeat directive. Since you cannot dynamically generate the name attribute of input elements using interpolation, you have to wrap each set of repeated inputs in an ngForm directive and nest these in an outer form element.

https://docs.angularjs.org/api/ng/directive/form

Upvotes: -1

Related Questions