I'm new to AngularJS; can someone help me why the below code is not validating the form?
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product);" novalidate>
<select ng-model="reviewCtrl.review.stars" required>
<option value="">Rate the Product</option>
<option value="1">1 Star</option>
<option value="2">2 Star</option>
</select>
<textarea ng-model="reviewCtrl.review.body"></textarea>
<input type="email" ng-model="reviewCtrl.review.author" required/>
<div>ReviewForm is: {{reviewForm.$valid}}</div>
<input type="submit" value="Submit" />
</form>
Remove novalidate from your form.
You have novalidate at the beginning of your form which is disabling your browser's native form validation.
Note that novalidate is used to disable browser's native form
validation.
See HTML 'form' novalidate Attribute and Angular Forms
At first step: Remove novalidate from your form
and add the submit button like this:
<input type="submit" value="Submit" ng-disabled="isFormValid(reviewForm) />
and in your .js:
$rootScope.isFormValid = function (form) {
return form.$invalid;
};
#Milton I think there is no problem with your code, i have created a plunkr that also shows that there is not any issue with your code.
Here is the code i have written.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script>
function myctrl($scope) {
$scope.review = {};
}
</script>
</head>
<body>
<div>
<form name="reviewForm" ng-controller="myctrl as reviewCtrl" ng-submit="reviewCtrl.addReview(product);" novalidate>
<select ng-model="reviewCtrl.review.stars" required>
<option value="">Rate the Product</option>
<option value="1">1 Star</option>
<option value="2">2 Star</option>
</select>
<textarea ng-model="reviewCtrl.review.body"></textarea>
<input type="email" ng-model="reviewCtrl.review.author" required/>
<div>ReviewForm is: {{reviewForm.$valid}}</div>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
Here is the plunkr link of the code:
http://plnkr.co/edit/nVCmukG5abpi1Y4ZHkrq?p=preview
If the issue remains, can you give more description of data you are entering?
Related
I have following code:
<form name="reviewForm_{{$index}}" ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>
<blockquote class="newReview">
<b>Stars {{reviewCtrl.review.stars}}</b>
<p>{{reviewCtrl.review.comment}}</p>
<cite>{{reviewCtrl.review.author}}</cite>
</blockquote>
<select class="form-control" ng-model="reviewCtrl.review.stars">
<option value="1">1 star</option>
<option value="1">2 stars</option>
<option value="1">3 stars</option>
<option value="1">4 stars</option>
<option value="1">5 stars</option>
</select><br />
<textarea ng-model="reviewCtrl.review.comment" required></textarea>
<label>by:</label>
<input type="text" ng-model="reviewCtrl.review.author" required /><br />
<div>reviewForm is {{reviewForm_$index.$valid}}</div>
<input class="btn btn-primary btn-large" type="submit" value="Submit" />
</form>
The Form above lies within a ng-repeat and has the name reviewForm_$index.
That works fine. So it will give reviewForm_0, reviewForm_1 and so on.
Now I would like to check if the form is valid with {{reviewForm_$index_$valid}}.
For some reason it doesn't show anything.
Do I have the wrong syntax?
Actually you are trying to access a property that does not exists since reviewform_$index will be treated as a form name not a variable. So change your code to something like this:
<div>reviewForm is {{reviewCtrl['reviewForm_' + $index].$valid}}</div>
That will work!!
Ok, I got it to work thanks to #klode.
Here my solution:
<form name="reviewForm" ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>
<blockquote class="newReview">
<b>Stars {{reviewCtrl.review.stars}}</b>
<p>{{reviewCtrl.review.comment}}</p>
<cite>{{reviewCtrl.review.author}}</cite>
</blockquote>
<select class="form-control" ng-model="reviewCtrl.review.stars">
<option value="1">1 star</option>
<option value="2">2 stars</option>
<option value="3">3 stars</option>
<option value="4">4 stars</option>
<option value="5">5 stars</option>
</select><br />
<textarea ng-model="reviewCtrl.review.comment" required></textarea>
<label>by:</label>
<input type="text" ng-model="reviewCtrl.review.author" required /><br />
<div>reviewForm is {{reviewForm.$valid}}</div>
<input class="btn btn-primary btn-large" type="submit" value="Submit" />
</form>
As explained by Klode can I leave the form name without the $index trailer and address the form's $valid property each loop via it's name just so: reviewForm.$valid
i have a form with two differently named ng-models. I need to pass both of them with the form. How would this work? I need to pass currentItem + currentItem.Customer I am having trouble with a PdfSharp controller and I want to see if this is the reason why the Customer Values are being passed back as Null.
controller
$scope.EmailPdf = function () {
var id = $scope.currentItem.JobId
$http.get('/api/Pdf/' + id).success(function () {
$scope.PrintPreviewModal();
});
}
form
<form ng-submit="submitJob()" enctype="multipart/form-data" name="myForm">
<fieldset>
<div class="col-xs-12">
<label>Number:</label>
<input ng-model="currentItem.JobNumber" type="text" name="JobNumber">
<label>Customer:</label>
<input type="text" ng-model="currentItem.Customer.CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
typeahead-on-select="selectEditCustomer($item)">
</div>
<input ng-model="currentItem.CustomerId" type="text" ng-hide="true"/>
<div class="inline-fields">
<label >Status:</label>
<selectng-model="currentItem.JobStatus">
<option value="" selected="selected">Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label>Address:</label>
<input ng-model="currentItem.Customer.CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label>Name:</label>
<input ng-model="currentItem.JobName" type="text">
<label>City:</label>
<input ng-model="currentItem.Customer.CustomerCity" type="text">
<label>St:</label>
<inputng-model="currentItem.Customer.CustomerState" type="text">
<label>Zip:</label>
<input ng-model="currentItem.Customer.CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label>Address:</label>
<input ng-model="currentItem.JobAddress" type="text">
<label>Ph:</label>
<input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text">
<label>Fax:</label>
<input disabled style="width: 105px"ng-model="currentItem.Customer.CustomerFaxNumber" type="text">
</div>
<input ng-click="EmailPdf(currentItem)" type="button" value="Email" />
Well it's a bit difficult to tell exactly what you are asking here, but it sounds like you mean that you need to pass more information than the ID into your get. So you can pass the entire currentItem with all it's content like this
$http.get('/api/Pdf/' + id,angular.toJson($scope.currentItem)).....
Is that what you are trying to do?
I have a following problem with select in my AngularJS application.
I have set required attribute but it doesn't work on select tag. Doesn't
trigger native validation. Here is my html code:
<div ng-app="app">
<div ng-controller="testCtrl">
<form ng-submit="selectChanged()">
<select ng-model="first" required="required">
<option>choose</option>
<option value="2">2</option>
</select>
<input type="submit" value="test"/>
</form>
</div>
</div>
Here is my controller:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.selectChanged = function () {
};
});
Here is working jsfiddle:
http://jsfiddle.net/zono/k3b5J/3/
Best regards.
Your code should be:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.first = "";
$scope.selectChanged = function () {
alert($scope.first);
};
});
You didn't add the variable your select is bound to, $scope.first in this case.
And the empty option should have a value of "" --> <option value ="">choose</option>
Here is a working fiddle: http://jsfiddle.net/k3b5J/4/
You need to wire-up form validity with submit button, e.g. so it gets disabled when form is not valid
<div ng-app="app">
<div ng-controller="testCtrl">
<form name="myform" ng-submit="selectChanged()">
<select ng-model="first" required="required">
<option>choose</option>
<option value="2">2</option>
</select>
<input type="submit" value="test" ng-disabled="!myform.$valid"/>
</form>
</div>
</div>
I updated your fiddle to reflect that: http://jsfiddle.net/qt8z3/
The thing is that when option value is not defined, the text is taken as a value, so, when choose is selected, actual value of first should be choose.
Your code can be fixed like this:
<div ng-app="app">
<div ng-controller="testCtrl">
<form ng-submit="selectChanged()">
<select ng-model="first" required="required">
<option value="">choose</option>
<option value="2">2</option>
</select>
<input type="submit" value="test"/>
</form>
</div>
</div>
note value on <option value="">choose</option>
Edit note: when choose is selected, value actually exists, so field is filled and it passes required validation.
I would like to:
disable radio button (with name 'advertisementType') when select list (with name 'updateAdvertisement') has got only 1 element
disable submit button (with name 'saveButton') when selected option on select list has got null value
How can I do that in angular?
This is my html:
<div ng-controller="AdvertisementCtrl">
<form ng-submit="save()">
<input type="radio" ng-model="advertisementType" name="advertisementType" value="false">Update<br />
<select ng-model="updateAdvertisement" name="updateAdvertisement" ng-show="advertisementType == 'false'">
<option value>Select item</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
<input type="submit" value="Save" name="saveButton" ng-disabled="saveButton" />
</form>
</div>
This is my javascript (but I have no idea):
<script>
function AdvertisementCtrl($scope) {
}
</script>
HTML
<div ng-controller="AdvertisementCtrl">
<form ng-submit="save()">
<input type="radio" ng-model="advertisementType" name="advertisementType" ng-disabled='carTypes.length<=1' value="false">Update<br />
<select ng-model="updateAdvertisement" name="updateAdvertisement" ng-options="item.type for item in carTypes">
<option value>Select item</option>
</select>
<input type="submit" value="Save" name="saveButton" ng-disabled="!updateAdvertisement" />
</form>
</div>
JavaScript
function AdvertisementCtrl($scope) {
$scope.carTypes = [
{id:'1', type:'Volvo'},
{id:'2', type:'Saab'},
{id:'3', type:'Mercedes'},
{id:'4', type:'Audi'}
]
}
The JSFiddle is here http://jsfiddle.net/7Jw9B/
Populate the select from an array that you declare in the controller
Check array length and disable the radio button when array length is 1
Disable saveButton based on the value of updateAdvertisement
<script>
function AdvertisementCtrl($scope) {
$scope.cars = ['Volvo', 'Saab', 'Mercedes', 'Audi', 'BMW'];
}
</script>
Markup:
<div ng-controller="AdvertisementCtrl">
<form ng-submit="save()">
<input type="radio" ng-model="advertisementType" name="advertisementType" value="false" ng-disabled="cars.length <= 1">Update<br />
<select ng-model="updateAdvertisement" name="updateAdvertisement" ng-show="advertisementType == 'false'" ng-options="cars">
</select>
<input type="submit" value="Save" name="saveButton" ng-disabled="updateAdvertisement" />
</form>
</div>
Should probably be tested in a fiddle :-), could do that later
I am new to Angularjs.
Currently i have code like this that submits the form on button click
<form ng-submit="reloadA(resultsPerPage)">
<select ng-model="resultsPerPage">
<option value="10">10</option>
<option value="25">25</option>
</select>
<input type="submit" id="submit" value="Submit" />
</form>
I need that form should be submitted on selecting the option without need of the submit button
ok, for this you should have that ng-submit function in the select, like this;
<form>
<select ng-change="reloadA(resultsPerPage)" ng-model="resultsPerPage">
<option value="10">10</option>
<option value="25">25</option>
</select>
<input type="submit" id="submit" value="Submit" />
</form>
I believe you can use ng-change here
<select ng-model="resultsPerPage" ng-change="reloadA(resultsPerPage)">