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)">
Related
I am using react hook form to get form data and validation. When validating I found the radio input and check box aren't getting focused when nothing is selected although I stated they should be required. I went through their documentation, didn't find anything helpful. What am I missing here?
<fieldset>
<legend>Are you a student</legend>
<label htmlFor="isStudent">Yes</label>
<input
type="radio"
name="isStudent"
value="yes"
{...register("isStudent", { required: true })}
/>
<label htmlFor="isStudent">No</label>
<input
type="radio"
name="isStudent"
value="no"
{...register("isStudent", { required: true })}
/>
</fieldset>
<fieldset>
<label htmlFor="age">Select your age.</label>
<select
name=""
id=""
{...register("age", { required: true })}
>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</fieldset>
I'm trying to initialize data in combobox, and I have tried every possible ways, but nothing:
<select ng-init= "account.username = githubaccounts[0].username" data-ng-model="account" data-ng-options="account.username for account in githubaccounts"
class="btn btn-default" data-container="body">
</select>
<div class="form-group" ng-show="account.username == 'Other'">
<label for="groupNameTxt">Group Name:</label>
<input type="text" class="form-control" name="groupNameTxt" id="groupNameTxt" placeholder="Enter Group Name..." ng-model="group.groupName">
</div>
Other way that it works is this:
<select class="btn btn-default" data-container="body"
ng-init="githubaccounts[0].username" ng-model="account">
<option ng-repeat="account in githubaccounts" value="">
{{account.username}}
</option>
</select>
But, then, ng-show doesn't work:
Any ideas?
Thank you very much.
Make following changes in code
<select ng-init= "anyModelVariable.username = githubaccounts[0].username" data-ng-model="anyModelVariable.username " data-ng-options="account.username for account in githubaccounts"
class="btn btn-default" data-container="body">
</select>
Changes:
1. use different variable in ng-model other then account.
initialize same variable ng-model with with githubaccounts[0].username.
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?
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 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