AngularJS adding objects into an array through a form

Question

var app = angular.module('gemStore', []);
  app.controller('StoreController', function($scope){

$scope.gems = [
	      {
	  	"name": "Orthoclase Feldspar",
	  	"description": "First synthesized in 1962, Rhenium diboride, synthetic superhard material, compared to the others on the list is a cheaper material to make as its production does not involve high pressures.",
	  	"formula": "(ReB2)",
		"rank": 5,
	  	"hard": 72,
	  	"rarity": 7,
	  	"images": [
	  		"images/rhenium.jpg",
	  		"images/rhenium2.jpg",
	  		"images/rhenium3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 5,
	  		"body": "I love this gem!",
	  		"author": "joe@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "This gem sucks.",
	  		"author": "tim@example.org"
	  	}]
	  },   {
	  	"name": "Quartz",
	  	"description": "Quartz is a chemical compound consisting of one part silicon and two parts oxygen. It is silicon dioxide (SiO2). It is the most abundant mineral found at Earth's surface, and its unique properties make it one of the most useful natural substances.",
	  	"formula": "(SiO2)",
		"rank": 4,
	  	"hard": 100,
	  	"rarity": 7,
	  	"images": [
	  		"images/quartz.jpg",
	  		"images/quartz2.jpg",
	  		"images/quartz3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 3,
	  		"body": "I think this gem was just OK, could honestly use more 'shine', IMO.",
	  		"author": "JimmyDean@example.org"
	  	}, {
	  		"stars": 4,
	  		"body": "Any gem with 12 'faces' is for me!",
	  		"author": "gemsRock@example.org"
	  	}]
	  }, {
	  	"name": "Topaz",
	  	"description": "Topaz is a silicate mineral of aluminium and fluorine with the chemical formula Al2SiO4(F,OH)2. Topaz crystallizes in the orthorhombic system, and its crystals are mostly prismatic terminated by pyramidal and other faces.",
	  	"formula": "(Al2SiO4(OH-,F-)2)",
		"rank": 3,
	  	"hard": 200,
	  	"rarity": 8,
	  	"images": [
	  		"images/topaz.jpg",
	  		"images/topaz2.jpg",
	  		"images/topaz3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 1,
	  		"body": "This gem is WAY too expensive for its 'rarity' value.",
	  		"author": "turtleguyy@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "BBW: High 'shine' != High Quality.",
	  		"author": "LouisW407@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "Don't waste your rubles!",
	  		"author": "nat@example.org"
	  	}]
	  },   {
	  	"name": "Corundum",
	  	"description": "Corundum is a rock-forming mineral that is found in igneous, metamorphic, and sedimentary rocks. It is an aluminum oxide with a chemical composition of Al2O3 and a hexagonal crystal structure.",
	  	"formula": "(Al2O3)",
		"rank": 2,
	  	"hard": 400,
	  	"rarity": 9,
	  	"images": [
	  		"images/corundum.jpg",
	  		"images/corundum2.jpg",
	  		"images/corundum3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 1,
	  		"body": "This gem is WAY too expensive for its 'rarity' value.",
	  		"author": "turtleguyy@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "BBW: High 'shine' != High Quality.",
	  		"author": "LouisW407@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "Don't waste your rubles!",
	  		"author": "nat@example.org"
	  	}]
		
		
	  },	{
	  	"name": "Diamond",
	  	"description": "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high 'shine' gem.",
	  	"formula": "(C)",
		"rank": 1,
	  	"hard": 1500,
	  	"rarity": 10,
	  	"images": [
	  		"images/diamond.png",
	  		"images/diamond2.jpg",
	  		"images/diamond3.png"
	  	],
	  	"reviews": [{
	  		"stars": 1,
	  		"body": "This gem is WAY too expensive for its 'rarity' value.",
	  		"author": "turtleguyy@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "BBW: High 'shine' != High Quality.",
	  		"author": "LouisW407@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "Don't waste your rubles!",
	  		"author": "nat@example.org"
	  	}]
		
	  }];
	  
	 $scope.addSubstance = function(addsub) {
	  	   gem.push(addsub);
	  	   this.sub = {};
	  }
	  
	  

	  $scope.addReview = function (stone) {
	  	   this.gem.reviews.push(stone);
	  	   this.rev = {};
	  }
  });

  app.controller('TabController', function($scope){
    $scope.tab = 1;

    $scope.setTab = function(newValue){
      $scope.tab = newValue;
    };

   $scope.isSet = function(tabNumber){
      return $scope.tab === tabNumber;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html  lang="en" >
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hardest Substances</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
       <link href="css/gemstore.css" rel="stylesheet">
  </head>
  <body ng-app="gemStore" class="list-group" ng-controller="StoreController">
  <div class="container">
    <header>
      <h1 class="text-center">Top 5 Hardest Substances on Earth</h1>
    </header>
    <div class="list-group-item" ng-repeat="gem in gems | orderBy:'-rank'" >
      <h3>
        {{gem.name}}
        <em class="pull-right">{{gem.rank}}</em>
      </h3>
      <div ng-show="gem.images.length">
	   <ul class="list-inline thumbs">
	      <li class="small-image thumbnail"
	          ng-repeat="image in gem.images" >
	               <img ng-src="{{image}}" >
	       </li>
	   </ul>
	  </div>
      <section ng-controller="TabController">
	  <ul class="nav nav-pills">
	  <li ng-class="{active:isSet(1)}"> <a href ng-click="setTab(1)">Description</a> </li>
	  <li ng-class="{active:isSet(2)}"> <a href ng-click="setTab(2)">Specs</a> </li>
	  <li ng-class="{active:isSet(3)}"> <a href ng-click="setTab(3)">Opinions</a> </li>
	  </ul>

        <div ng-show="isSet(1)">
          <h4>Description</h4>
          <blockquote> {{gem.description}}</blockquote>
        </div>
        <div ng-show="isSet(2)">
          <h4>Specs</h4>
          <blockquote>
          <ul class="list-unstyled">
			<li><strong>Chemical Formula</strong>: {{gem.formula}}</li>
			<li><strong>Rarity</strong>: {{gem.rarity}}</li>
			<li><strong>Absolute Hardness: </strong>{{gem.hard}} </li>
         </ul>
         </blockquote>
        </div>

        <div ng-show="isSet(3)">
          <h4>Reviews</h4>
          <ul>

		  	<li class="list-unstyled" ng-repeat = "review in gem.reviews">
		  		<blockquote>
		  			<strong>{{review.stars}} Stars</strong>
                     {{review.body}}
		  			<br><cite>-{{review.author}}</cite>
		  		</blockquote>
		  	</li>
           </ul>
  <form name="reviewForm" ng-submit="addReview(rev)">
     <blockquote >
	  	   <strong>{{rev.stars}} Stars</strong>
	  	  	{{rev.body}}
	  	    <br><cite>&#9472;{{rev.author}}</cite>
	 </blockquote>
		                 <fieldset>
		                 <legend>Submit a Review</legend>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="reviewForm.stars.$error.required">**</div>
		                   <select ng-model="rev.stars" class="form-control" name="stars" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required >
		                     <option value>Rate the Product</option>
		                   </select>
		                 </div>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="reviewForm.body.$error.required">**</div>
		                   <textarea ng-model="rev.body" name = "body" class="form-control" placeholder="Write a short review of the product..." title="Review" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="reviewForm.body.$error.pattern">Body doesn't respect the pattern.
                           </div>
		                 </div>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="reviewForm.author.$error.required">**</div>
		                   <input ng-model="rev.author" type="email" name = "author" class="form-control" placeholder="jimmyDean@example.org" title="Email"  ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>
		                   <div class="custom-error" ng-show="reviewForm.author.$error.pattern">Email Address doesn't respect the pattern.
                           </div>
                        </div>
		                 <div class="form-group">
		                   <input type="submit" class="btn btn-primary pull-right" ng-disabled="reviewForm.$invalid" value="Submit Review" >
		                 </div>
		                 </fieldset>
           </form>

</div>
</section>

</div>
<button onclick="substanceForm()" class="btn btn-blue">Add Substance</button>
     <form name="addSubstance" ng-submit="addSubstance(sub)">
	  		              <fieldset>
		                 <legend>Add a Substance</legend>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="addSubstance.rank.$error.required">**</div>
		                   <select ng-model="sub.rank" class="form-control" name="rank" ng-options="rank for rank in [10,9,8,7,6,5,4,3,2,1]" title="Rank" required >
		                     <option value>Rank the Substance</option>
		                   </select>
		                 </div>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="addSubstance.name.$error.required">**</div>
		                   <textarea ng-model="sub.name" name = "Name" class="form-control" placeholder="Write the Name of the Substance...." title="Name" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.name.$error.pattern">Invalid Name.
                           </div>
		                 </div>
                        <div class="form-group">
						 <div class=custom-error ng-show="addSubstance.description.$error.required">**</div>
		                   <textarea ng-model="sub.description" name = "Description" class="form-control" placeholder="Write the Description of the Substance..." title="Description" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.description.$error.pattern">Invalid Description.
		                 </div>
						 </div>
						<div class="form-group">
						 <div class=custom-error ng-show="addSubstance.formula.$error.required">**</div>
		                   <textarea ng-model="sub.formula" name = "Formula" class="form-control" placeholder="Write the Formula..." title="Formula" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.formula.$error.pattern">Invalid Formula.
						 </div>
						 </div>
						 <div class="form-group">
		                 <div class=custom-error ng-show="addSubstance.rarity.$error.required">**</div>
		                   <select ng-model="sub.rarity" class="form-control" name="rarity" ng-options="rarity for rarity in [10,9,8,7,6,5,4,3,2,1]" title="Rarity" required >
		                     <option value>Rank the Substance</option>
		                   </select>
		                 </div>
						 <div class="form-group">
						 <div class=custom-error ng-show="addSubstance.hard.$error.required">**</div>
		                   <textarea ng-model="sub.hard" name = "Absolute" class="form-control" placeholder="Write the Absolute Hardness Value" title="Absolute" ng-pattern="/^[0-9]*$/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.hard.$error.pattern">Numbers Only.
						 </div>
						 </div>
						
		                 <div class="form-group">
		                   <input type="submit" class="btn btn-primary pull-right" ng-disabled="addSubstance.$invalid" value="Submit Substance" >
		                 </div>
		                 </fieldset>
           </form>
	  
	  
	  
	  
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

That's basically the code i have right now , as you can see in the end of HTML i have a form to add another substance , when i try to submit it, it wont work and i tried several different things. I hope you guys will help me out thanks ! :) Ohh and i want to include images in the form also if someone would know how . Basically i want the form to include everything that's in the array and add it so that it would show all the content on the page and in the place depending on rank. the form i have problems with is the addSubstance form . What i suspect is the addSubstance function and also the submit button .

Answer 1

You have 3 problems:

• The FormController which is created by the name attribute of the form is the same name as the submit function: addSubstance. Solution Change one of them. I changed the submit function to insertSubstance in the controller and also inside the ngSubmit directive.

• The function itself - It tries to push the substance object to an undefined variable. But it should actually push it to the array of $scope.gems so it will be displayed in the view when you add it.

• You will not be able to add reviews to the newly added substance because it don't have a reviews array (When you call $scope.addReview from the view). Solution - Add the reviews array before, like this: addsub.reviews = []; (addsub is the object passed to the function).

This is the final function:

// Change the name of the function so it won't be the same as the FormController object
$scope.insertSubstance = function(addsub) {
    addsub.reviews = []; // Predefine the "reviews" array so it won't be undefined when you need to add a review to this substance  
    $scope.gems.push(addsub); // Not "gem.push"
    this.sub = {}; // This is just fine :)
}

I also changed ng-submit="addSubstance(sub)" to ng-submit="insertSubstance(sub)".

Note that you wrote in the comments "ohh and there is no var gem , i created ngrepeat = gem in gems" - This will not work because the form element is outside the ngRepeat directive loop, so it has no idea who's gem - It's available only inside the ngRepeat loop (That's why it worked for adding a review - this.gem - it's in the same scope of the function).

This is a working solution:

var app = angular.module('gemStore', []);
  app.controller('StoreController', function($scope){

$scope.gems = [
	      {
	  	"name": "Orthoclase Feldspar",
	  	"description": "First synthesized in 1962, Rhenium diboride, synthetic superhard material, compared to the others on the list is a cheaper material to make as its production does not involve high pressures.",
	  	"formula": "(ReB2)",
		"rank": 5,
	  	"hard": 72,
	  	"rarity": 7,
	  	"images": [
	  		"images/rhenium.jpg",
	  		"images/rhenium2.jpg",
	  		"images/rhenium3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 5,
	  		"body": "I love this gem!",
	  		"author": "joe@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "This gem sucks.",
	  		"author": "tim@example.org"
	  	}]
	  },   {
	  	"name": "Quartz",
	  	"description": "Quartz is a chemical compound consisting of one part silicon and two parts oxygen. It is silicon dioxide (SiO2). It is the most abundant mineral found at Earth's surface, and its unique properties make it one of the most useful natural substances.",
	  	"formula": "(SiO2)",
		"rank": 4,
	  	"hard": 100,
	  	"rarity": 7,
	  	"images": [
	  		"images/quartz.jpg",
	  		"images/quartz2.jpg",
	  		"images/quartz3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 3,
	  		"body": "I think this gem was just OK, could honestly use more 'shine', IMO.",
	  		"author": "JimmyDean@example.org"
	  	}, {
	  		"stars": 4,
	  		"body": "Any gem with 12 'faces' is for me!",
	  		"author": "gemsRock@example.org"
	  	}]
	  }, {
	  	"name": "Topaz",
	  	"description": "Topaz is a silicate mineral of aluminium and fluorine with the chemical formula Al2SiO4(F,OH)2. Topaz crystallizes in the orthorhombic system, and its crystals are mostly prismatic terminated by pyramidal and other faces.",
	  	"formula": "(Al2SiO4(OH-,F-)2)",
		"rank": 3,
	  	"hard": 200,
	  	"rarity": 8,
	  	"images": [
	  		"images/topaz.jpg",
	  		"images/topaz2.jpg",
	  		"images/topaz3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 1,
	  		"body": "This gem is WAY too expensive for its 'rarity' value.",
	  		"author": "turtleguyy@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "BBW: High 'shine' != High Quality.",
	  		"author": "LouisW407@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "Don't waste your rubles!",
	  		"author": "nat@example.org"
	  	}]
	  },   {
	  	"name": "Corundum",
	  	"description": "Corundum is a rock-forming mineral that is found in igneous, metamorphic, and sedimentary rocks. It is an aluminum oxide with a chemical composition of Al2O3 and a hexagonal crystal structure.",
	  	"formula": "(Al2O3)",
		"rank": 2,
	  	"hard": 400,
	  	"rarity": 9,
	  	"images": [
	  		"images/corundum.jpg",
	  		"images/corundum2.jpg",
	  		"images/corundum3.jpg"
	  	],
	  	"reviews": [{
	  		"stars": 1,
	  		"body": "This gem is WAY too expensive for its 'rarity' value.",
	  		"author": "turtleguyy@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "BBW: High 'shine' != High Quality.",
	  		"author": "LouisW407@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "Don't waste your rubles!",
	  		"author": "nat@example.org"
	  	}]
		
		
	  },	{
	  	"name": "Diamond",
	  	"description": "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high 'shine' gem.",
	  	"formula": "(C)",
		"rank": 1,
	  	"hard": 1500,
	  	"rarity": 10,
	  	"images": [
	  		"images/diamond.png",
	  		"images/diamond2.jpg",
	  		"images/diamond3.png"
	  	],
	  	"reviews": [{
	  		"stars": 1,
	  		"body": "This gem is WAY too expensive for its 'rarity' value.",
	  		"author": "turtleguyy@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "BBW: High 'shine' != High Quality.",
	  		"author": "LouisW407@example.org"
	  	}, {
	  		"stars": 1,
	  		"body": "Don't waste your rubles!",
	  		"author": "nat@example.org"
	  	}]
		
	  }];
	  
	 $scope.insertSubstance = function(addsub) {
           addsub.reviews = [];
	  	   $scope.gems.push(addsub);
	  	   this.sub = {};
	  }
	  
	  

	  $scope.addReview = function (stone) {
	  	   this.gem.reviews.push(stone);
	  	   this.rev = {};
	  }
  });

  app.controller('TabController', function($scope){
    $scope.tab = 1;

    $scope.setTab = function(newValue){
      $scope.tab = newValue;
    };

   $scope.isSet = function(tabNumber){
      return $scope.tab === tabNumber;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html  lang="en" >
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hardest Substances</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
       <link href="css/gemstore.css" rel="stylesheet">
  </head>
  <body ng-app="gemStore" class="list-group" ng-controller="StoreController">
  <div class="container">
    <header>
      <h1 class="text-center">Top 5 Hardest Substances on Earth</h1>
    </header>
    <div class="list-group-item" ng-repeat="gem in gems | orderBy:'-rank'" >
      <h3>
        {{gem.name}}
        <em class="pull-right">{{gem.rank}}</em>
      </h3>
      <div ng-show="gem.images.length">
	   <ul class="list-inline thumbs">
	      <li class="small-image thumbnail"
	          ng-repeat="image in gem.images" >
	               <img ng-src="{{image}}" >
	       </li>
	   </ul>
	  </div>
      <section ng-controller="TabController">
	  <ul class="nav nav-pills">
	  <li ng-class="{active:isSet(1)}"> <a href ng-click="setTab(1)">Description</a> </li>
	  <li ng-class="{active:isSet(2)}"> <a href ng-click="setTab(2)">Specs</a> </li>
	  <li ng-class="{active:isSet(3)}"> <a href ng-click="setTab(3)">Opinions</a> </li>
	  </ul>

        <div ng-show="isSet(1)">
          <h4>Description</h4>
          <blockquote> {{gem.description}}</blockquote>
        </div>
        <div ng-show="isSet(2)">
          <h4>Specs</h4>
          <blockquote>
          <ul class="list-unstyled">
			<li><strong>Chemical Formula</strong>: {{gem.formula}}</li>
			<li><strong>Rarity</strong>: {{gem.rarity}}</li>
			<li><strong>Absolute Hardness: </strong>{{gem.hard}} </li>
         </ul>
         </blockquote>
        </div>

        <div ng-show="isSet(3)">
          <h4>Reviews</h4>
          <ul>

		  	<li class="list-unstyled" ng-repeat = "review in gem.reviews">
		  		<blockquote>
		  			<strong>{{review.stars}} Stars</strong>
                     {{review.body}}
		  			<br><cite>-{{review.author}}</cite>
		  		</blockquote>
		  	</li>
           </ul>
  <form name="reviewForm" ng-submit="addReview(rev)">
     <blockquote >
	  	   <strong>{{rev.stars}} Stars</strong>
	  	  	{{rev.body}}
	  	    <br><cite>&#9472;{{rev.author}}</cite>
	 </blockquote>
		                 <fieldset>
		                 <legend>Submit a Review</legend>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="reviewForm.stars.$error.required">**</div>
		                   <select ng-model="rev.stars" class="form-control" name="stars" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required >
		                     <option value>Rate the Product</option>
		                   </select>
		                 </div>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="reviewForm.body.$error.required">**</div>
		                   <textarea ng-model="rev.body" name = "body" class="form-control" placeholder="Write a short review of the product..." title="Review" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="reviewForm.body.$error.pattern">Body doesn't respect the pattern.
                           </div>
		                 </div>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="reviewForm.author.$error.required">**</div>
		                   <input ng-model="rev.author" type="email" name = "author" class="form-control" placeholder="jimmyDean@example.org" title="Email"  ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>
		                   <div class="custom-error" ng-show="reviewForm.author.$error.pattern">Email Address doesn't respect the pattern.
                           </div>
                        </div>
		                 <div class="form-group">
		                   <input type="submit" class="btn btn-primary pull-right" ng-disabled="reviewForm.$invalid" value="Submit Review" >
		                 </div>
		                 </fieldset>
           </form>

</div>
</section>

</div>
<button onclick="substanceForm()" class="btn btn-blue">Add Substance</button>
     <form name="addSubstance" ng-submit="insertSubstance(sub)">
	  		              <fieldset>
		                 <legend>Add a Substance</legend>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="addSubstance.rank.$error.required">**</div>
		                   <select ng-model="sub.rank" class="form-control" name="rank" ng-options="rank for rank in [10,9,8,7,6,5,4,3,2,1]" title="Rank" required >
		                     <option value>Rank the Substance</option>
		                   </select>
		                 </div>
		                 <div class="form-group">
		                 <div class=custom-error ng-show="addSubstance.name.$error.required">**</div>
		                   <textarea ng-model="sub.name" name = "Name" class="form-control" placeholder="Write the Name of the Substance...." title="Name" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.name.$error.pattern">Invalid Name.
                           </div>
		                 </div>
                        <div class="form-group">
						 <div class=custom-error ng-show="addSubstance.description.$error.required">**</div>
		                   <textarea ng-model="sub.description" name = "Description" class="form-control" placeholder="Write the Description of the Substance..." title="Description" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.description.$error.pattern">Invalid Description.
		                 </div>
						 </div>
						<div class="form-group">
						 <div class=custom-error ng-show="addSubstance.formula.$error.required">**</div>
		                   <textarea ng-model="sub.formula" name = "Formula" class="form-control" placeholder="Write the Formula..." title="Formula" ng-pattern="/.{5,}/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.formula.$error.pattern">Invalid Formula.
						 </div>
						 </div>
						 <div class="form-group">
		                 <div class=custom-error ng-show="addSubstance.rarity.$error.required">**</div>
		                   <select ng-model="sub.rarity" class="form-control" name="rarity" ng-options="rarity for rarity in [10,9,8,7,6,5,4,3,2,1]" title="Rarity" required >
		                     <option value>Rank the Substance</option>
		                   </select>
		                 </div>
						 <div class="form-group">
						 <div class=custom-error ng-show="addSubstance.hard.$error.required">**</div>
		                   <textarea ng-model="sub.hard" name = "Absolute" class="form-control" placeholder="Write the Absolute Hardness Value" title="Absolute" ng-pattern="/^[0-9]*$/" required></textarea>
		                   <div class="custom-error" ng-show="addSubstance.hard.$error.pattern">Numbers Only.
						 </div>
						 </div>
						
		                 <div class="form-group">
		                   <input type="submit" class="btn btn-primary pull-right" ng-disabled="addSubstance.$invalid" value="Submit Substance" >
		                 </div>
		                 </fieldset>
           </form>
	  
	  
	  
	  
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>