Angularjs forms and models

forms and models

now into review i want to insert a review form to get review from users so lets start to insert form into review tab

Into the form of review tab we are going get how much starts user want to give for our product and what are the reviews and what author gives the review.i want all above information.

Into HTML
<form name="reviewForm>
<blockquote>
<b>Stars : {{review.stars}}</b>
{{review.body}}
<author>by : {{review.author}}</author>
</blockquote>
<select ng-model="review.stars">
<option value="1">1 Star </option>
<option value="2">2 Star </option>
<option value="3">3 Star </option>
<option value="4">4 Star </option>
<option value="5">5 Star </option>
</select>
<textarea ng-model="review.body"></textarea>
<label>by : </label>
<input ng-model="review.author" type="email" />
</form>

so in above code we can't define review variable anywhere so better coding prctise we need to define that so for that we need to intialize that and commonly intialization can be done into the controller so lets create the Controller.

App.js
app.controller("reviewController",function(){
this.review={}
});

So,now we need to bind this review Controller into our form so for that we need to do the Following.

Into HTML

<form name="reviewForm ng-controller="reviewController as reviewCtrl">
<blockquote>
<b>Stars : {{review.stars}}</b>
{{reviewCtrl.review.body}}
<author>by : {{reviewCtrl.review.author}}</author>
</blockquote>
<select ng-model="reviewCtrl.review.stars">
<option value="1">1 Star </option>
<option value="2">2 Star </option>
<option value="3">3 Star </option>
<option value="4">4 Star </option>
<option value="5">5 Star </option>
</select>
<textarea ng-model="reviewCtrl.review.body"></textarea>
<label>by : </label>
<input ng-model="reviewCtrl.review.author" type="email" />
</form>

So after filling needed information we need to submit the form and into Angular we have a ng-submit directive

ng-submit allows us to call a function when the form is submitted and after that we need to define that function into our ReviewController.

So into HTML :

<form name="reviewForm ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl .addReview(product)">
<blockquote>
<b>Stars : {{review.stars}}</b>
{{reviewCtrl.review.body}}
<author>by : {{reviewCtrl.review.author}}</author>
</blockquote>
<select ng-model="reviewCtrl.review.stars">
<option value="1">1 Star </option>
<option value="2">2 Star </option>
<option value="3">3 Star </option>
<option value="4">4 Star </option>
<option value="5">5 Star </option>
</select>
<textarea ng-model="reviewCtrl.review.body"></textarea>
<label>by : </label>
<input ng-model="reviewCtrl.review.author" type="email" />
</form>

So now we have to define this addReview function into ReviewController.

So Into app.js

app.controller("ReviewController",function(){

this.review={};

this.addReview=function(product)
{
product.review.push(this.review);
};
});

But when we went to browser and input our review and after submitting the form container which has all the input controller are not getring blank or we can say resetted so for that we just need to add one line into the addReview function of reviewController.

So Into app.js

app.controller("ReviewController",function(){

this.review={};

this.addReview=function(product)
{
product.review.push(this.review);
this.review={};
};
});

So what it can do is when this form is getting submitted and when this function got called so after pushing review into array we can assign a new javascript object to the review object which is blank.So after getting submitted the element's values will get reset.

form
1)You need to create multiple li's for each review that exists.
2)Set the blockquote stars ( strong tag) to the review stars.
3)Add the review body between the strong & cite tags.
4)Set the cite to the review author.
5)Use ng-model for review.stars select form field.
6)Use ng-model for review.body for the forms textarea.
7)Use ng-model for review.author – the email field.
8)In the strong tag, before Stars, put in the right expression to display review.stars. Keep the space prior to Stars
9)On the blank line with no tags put in the right expression to display review.body
10)In the cite tag, immediately after the -, put in the right expression to display review.author.