<form name="companyProfileForm" autocomplete="false" novalidate ng-submit="OnSaveCompanyProfile(companyProfileForm.$valid)" ng-controller="companyProfileDataEntryController">
<section ng-hide="!IsCompanyKnown();" class="row">
<div class="small-12 medium-6 large-6 columns">
<!--Industry-->
<section class="row">
<div class="small-12 medium-12 large-12 columns" ng-class="{ 'has-error' : (companyProfileForm.Industry.$invalid && submitted) }">
<div class="form-group">
<label for="Industry">*Industry</label>
<select name="Industry"
ng-model="CompanyProfileModel.IndustryId"
ng-options="item.Id as item.Description for item in IndustryList"
required>
<option value=null>-- select an industry --</option>
</select>
<span class="help-block" ng-show="companyProfileForm.Industry.$invalid && submitted">Please select a value.</span>
</div>
</div>
</section>
</div>
</section>
<button></button>
</form>
No matter what I do this form will evaluate to true. I want it to throw an error that Industry is required. Upon submit it goes to a function that prints to the console the parameter. It prints true every time.
You need to use the AngularJS ng-required directive, not required. Change the select element required to ng-required="true":
<select name="Industry" ng-model="CompanyProfileModel.IndustryId" ng-options="item.Id as item.Description for item in IndustryList" ng-required="true">
<option value=null>-- select an industry --</option>
</select>
Using 'required' on a form element will work in angular so long as your form element has an ng-submit="action()" and a button EXACTLY as follows inside the form:
<button type='submit' ng-click='submit()'>SomeText</button>
Related
I have a select box in that few values which is based on the selection i need to show the labels of the textbox.
ex: if you selected
the SE means I need to show the Location2 and Reporting To label box.
If you are selecting MANAger means need to show only Location2 label text
box only. And if you are selecting ADM/cluster, any one from this means need to be display only Location alone.
Js file
$scope.ChangeRole = function(id){
roleid=$scope.Role;
if(id=="2"){
// alert(id);
$scope.showreport =true;
$scope.showreportlocation=true;
$scope.showlocation = false;
}else if(id=="3"){
$scope.showreportlocation = true;
$scope.showreport = false;
$scope.showlocation = false;
}else{
$scope.showreport = false;
$scope.showreportlocation = false;
$scope.showlocation = true;
}
}
HTML file
<div class="col-lg-6">
<div class="form-group">
<label>Role<span style="color:red">*</span></label>
<div class="input-group role">
<select placeholder="Role" ng-model="Role" class="form-control pull-right" ng-change="ChangeRole(Role);" required ng-init="selectedType()" id="selectType"" name="role" required>
<option value="0">Role</option>
<option value="1">ADM</option>
<option value="2">SE</option>
<option value="3">MANA</option>
<option value="4">ClUSTER</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" ng-show="showlocation">
<label>Location<span style="color:red">*</span></label>
<div class="input-group location">
<select id="LocationInput" class="form-control" ng-model="LocationId" ng-options="location.Id as location.NameoftheLocation for location in locations" required>
<option id="OptionInput" value="">Location</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-md-6" ng-show="showreportlocation">
<div class="form-group">
<label>Location2<span style="color:red">*</span></label>
<div class="input-group site">
<select data-placeholder="Location" style="width: 100%;" ui-select2="select2Options" class="form-group" multiple ng-model="selectedTags" required>
<option ng-repeat="tag in tags" value="{{tag.Id}}">{{tag.NameoftheLocation}}</option>
</select>
<div class="input-group-addon">
<i class="fa fa-map"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="otherType" ng-show="showreport">
<div class="form-group">
<label>Reporting To<span style="color:red">*</span></label>
<div class="input-group">
<select class="form-control" id="reportingto" name="reportingto" ng-options="n.Id as n.Name for n in names" ng-model="ReportingTo" required>
<option value="">Reporting To</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
Here I have given the required option for all but which is not allowing me to save because required is present.
Using ng-show for particular selection I hide that label, but while saving html will check that field also, which is wrong please let me know that how to do.
Please some make the fiddle and let me know,
Use ng-required instead and only require it when it is shown.
I also tested Casey's suggestion of using ng-if instead of ng-show and that works as well. https://plnkr.co/edit/eeKvz5zRFeuLSF6fDbuy?p=preview
I have a problem with 'select' when I choose an option in 1st 'select' I don't see the result in same time in the 2nd 'select', I must refresh the page manually with 'F5' so I can see the results.
add_parcelle.html
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{'has-error':Form.type.$dirty && Form.type.$invalid, 'has-success':Form.type.$valid}">
<label for="form-field-select-2">
Type de la parcelle <span class="symbol required"></span>
</label>
<select name="type" ng-model="type" title="select" class="cs-select cs-skin-elastic" ng-change="sendType(Form.type.$modelValue)" required>
<option value="" disabled selected>Selectionnez un type</option>
<option value="Lot">Lot</option>
<option value="Parcelle">Parcelle</option>
<option value="Zone">Zone</option>
<option value="Plant">Plant</option>
</select>
<span class="error text-small block" ng-if="Form.type.$dirty && Form.type.$invalid">Champ bligatoire</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{'has-error':Form.idParcelle.$dirty && Form.idParcelle.$invalid, 'has-success':Form.idParcelle.$valid && Form.idParcelle.$dirty}">
<label for="form-field-select-2">
Parent de la parcelle <span class="symbol required"></span>
</label>
<select data-ng-init="showParents()" name="idParcelle" ng-model="idParcelle" title="select" class="cs-select cs-skin-elastic">
<option value="" disabled selected>Selectionnez un parent</option>
<option value="1">Aucun parent</option>
<option ng-repeat="p in parcelle" value="{{p.idParcelle}}"><div ng-if="p.parent.libelle">{{p.libelle}}</div></option>
</select>
<span class="error text-small block" ng-if="Form.idParcelle.$dirty && Form.idParcelle.$invalid">Champ bligatoire</span>
</div>
</div>
</div>
ParcelleController.js
$scope.sendType= function(type){
$sessionStorage.typeParc=type;
console.log($sessionStorage.typeParc);
};
$scope.showParents = function() {
if($sessionStorage.typeParc=='Parcelle')
$scope.showLots();
else if($sessionStorage.typeParc=='Zone')
$scope.showParcels();
else if($sessionStorage.typeParc=='Plant')
$scope.showZones();
};
In 1st 'Select' I use:
ng-change="sendType(Form.type.$modelValue)"
so I can store the Form.type and use it in function showParents() that show the result in 2nd 'Select'
data-ng-init="showParents()"
So, this is my problem!!
thanks in advance :)
after edit of 'Gustavo Gabriel'
this is the result:
enter image description here
I don't see the list in 'select' but I see it in console :p
In the first select modify your ng-change to:
ng-change="sendType(Form.type.$modelValue); showParents();"
Hope it helps =)
I am trying to build an online store for my project, and i wish i could add a review form in one of my pages, i am getting a problem with inserting the input value into the array ! here is my files
details.html
<div class="col-sm-12">
<div class="row">
<div ng-controller="reviewController">
<h3 class="pdt-title">Review</h3><hr>
<div class="alert alert-danger" ng-if="reviews.length == 0">
No reviews yet, be the first to review this Product!
</div><br>
<div class="col-sm-12" ng-repeat="review in reviews" >
<blockquote class="row">
<h3 class="pdt-title col-sm-6">{{review.username}}</h3>
<h3 class="pdt-title col-sm-6">{{review.star}}</h3>
<h5 class="col-sm-12"><small><i>{{review.email}}</i></small></h5>
<p class="col-sm-12">{{review.message}}</p>
</blockquote>
</div>
<form class="form-inline form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input class="form-control" type="text" ng-model="username"></input>
<span class="input-group-addon">E-mail</span>
<input class="form-control" type="email" ng-model="email"></input>
<span class="input-group-addon">Star</span>
<select class="form-control" ng-model="star">
<option name="oneStar" value="1 star">1 Star</option>
<option name="twoStar" value="2 star">2 Star</option>
<option name="threeStar" value="3 star">3 Star</option>
<option name="fourStar" value="4 star">4 Star</option>
<option name="fiveStar" value="5 star">5 Star</option>
</select>
</div>
</form>
<textarea class="form-control" rows="5" ng-model="message"></textarea><br>
<input type="submit" class="btn btn-block btn-success" ng-submit="addReview()" value="Submit review"></input>
</div>
</div>
</div>
</div>
</div>
and here is my controller
app.js
app.controller('reviewController',function($scope){
$scope.reviews=[];
$scope.addReview=function(){
$scope.reviews.push({
name:$scope.username,
email:$scope.email,
star:$scope.star,
message:$scope.message
});
};
});
it would be great if someone explains the comments staying on the page even when the page is refreshed, usually the comments get lost when the page is refreshed.
As said in the comments, you should load your comments from somewhere. A service should do the job.
But your problem was with your ng-submit button. Didn't inspect in deep but I changed to ng-click and it worked. Also, be sure to always place your "fields" inside an object and not directly on the $scope.
//Set the models inside an object
$scope.review = {};
And then
<input class="form-control" type="text" ng-model="review.username" />
Here's an updated:
Fiddle
As an extra tip, if you haven't check this awesome guide yet you should save some time and read through it:
angular-styleguide
It contains a compilation of angular best practices written by John Papa.
I have 2 selects side by side both getting 6 columns each.
In order to get them to look correctly I have removed the left padding from the left select and the right from the right.
Using classes pull-left and pull-right does not have any effect.
However when I decrease the view port size it no longer looks correct.
What is the best way to achieve what I need?
<div class="row">
<div class="col-md-6">
<label>Min Year:</label>
<select class="form-control" ng-model="minYear" ng-options="" required>
<option value="">Min</option>
</select>
</div>
<div class="col-md-6">
<label>Max Year:</label>
<select class="form-control" ng-model="maxYear" ng-options="" required>
<option value="">Max</option>
</select>
</div>
</div>
thank.
for the decrement of size you shold add the correct col for sm and xs
div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<label>Min Year:</label>
<select class="form-control" ng-model="minYear" ng-options="" required>
<option value="">Min</option>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label>Max Year:</label>
<select class="form-control" ng-model="maxYear" ng-options="" required>
<option value="">Max</option>
</select>
</div>
</div>
I am trying to show a div depending on what is selected from the drop down list. For example, if a user selects 'Cash' from the list show Cash div or if the user select 'Check' from the list show Check div
I have put together sample but its incomplete and needs to wire-up
http://jsfiddle.net/abuhamzah/nq1eyj1v/
Also when the user change the selection I would also like to clear the previous selection so when the user goes back to the previous selection they should not see.
<div ng-controller="MyCtrl">
<div class="col-xs-12">
<label class="col-xs-6 control-label">Type:</label>
<div class="col-xs-6">
<select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
<option ng-option value="Cash">Cash</option>
<option ng-option value="Check">Check</option>
<option ng-option value="Money Order">Money Order</option>
</select>
</div>
</div>
<div class="col-xs-12" id="cash">
<div >
<label class="col-xs-6 control-label">Cash :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.cash" />
</div>
</div>
</div>
<div class="col-xs-12" id="check">
<div >
<label class="col-xs-6 control-label">check :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.check" />
</div>
</div>
</div>
<div class="col-xs-12" id="money_order">
<div >
<label class="col-xs-6 control-label">money_order :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.money_order" />
</div>
</div>
</div>
</div>
//controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeme = function() {
alert('here');
}
}
you didnt initialize as the angular app coz u missed the ng-app directive first
and this is the solution using ng-if
DEMO
<div ng-app="myApp" ng-controller="MyCtrl"> // initialize as a angular app
<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> // this div will show if the value of `payment.type` model equals to `cash`. and so on.