i am new to Angular js i want to ask i have a case in which i have to return "YES" if the checkbox is checked or true and want to return "NO" when the value is false or unchecked.
actually my data is storing in databse in "Tinyint" 1 or 0 form i want to do when 1 occurs it shows YES any solution for this Any help will be appreciated.
Here is my html
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" ng-model="rec.Name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" value="" ng-model="rec.isSpecial">
<span class="fa fa-check"></span>is Special</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isMultiple">
<span class="fa fa-check"></span>Is Multiple</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="button" ng-click="add(rec)" class="btn btn-sm btn-primary">ADD</button>
</div>
</div>
</form>
i need to target checkbox ismultiple and isspecial .
You can use ng-true-value of ng-false-value like this:
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" ng-model="rec.Name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isSpecial" ng-true-value = "YES" ng-false-value="NO">
<span class="fa fa-check"></span>is Special</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox c-checkbox">
<label>
<input type="checkbox" ng-model="rec.isMultiple" ng-true-value = "YES" ng-false-value="NO">
<span class="fa fa-check"></span>Is Multiple</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="button" ng-click="add(rec)" class="btn btn-sm btn-primary">ADD</button>
</div>
</div>
</form>
Related
the element marked i want to get the value to compare it with excel data
#FindBy(id="TAXEI")
//#FindBy(xpath="//*[#id='TAXEI']")
public WebElement taxesEIvalue;
public void verifyTaxesEIvalue() {
//jse.executeScript("arguments[0].setAttribute('type', '')",taxesEIvalue);
String value=taxesEIvalue.getAttribute("value");
System.out.println("the value is "+value);
}
I am facing problem to get the value in an application to compare it from excel,but unable to get value through Dom structure.The Html structure did't provide Value attribute
Here is the html code for the element unable to get the value that is in text box,i have compare with that value with the excel data using data driven
<div class="col-lg-6 col-md-6 col-sm-6">
<fieldset class="fsStyle">
<legend class="legendStyle">
<label class="control-label main">TAXES</label>
</legend>
<div class="wages">
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">EI</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXEI" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPIP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPIP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">CPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXCPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">QPP</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQPP" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Income Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXIT" disabled="disabled">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-5">
<label class="control-label">Quebec Tax</label>
</div>
<div class="col-sm-7">
<input type="text" class="control-label TAX pull-right" id="TAXQTax" disabled="disabled">
</div>
</div>
</div>
<a id="divExemptNamesIncome"></a>
<p class="form-control-static"><strong id="divExemptNamesIncome"></strong></p>
</div>
</fieldset>
</div>
When I try to access user.firstname value in controller, it gives the following error.
TypeError: Cannot read property 'firstname' of undefined
$scope.signUpCustomer = function(){
console.log("GGGGGGGGGGGGGGGGGGGGGGGGG ", $scope.user.firstname);
}
<form class="form-horizontal font-hp-simplified signUpUserForm row" role="form" ng-submit="signUpCustomer()" name ="signUpUserForm" ng-show="!userVendor">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="firstname" class="col-md-12">First Name:</label>
<div class="col-md-12">
<input ng-model="user.firstname" type="text" class="form-control" name="firstname" required />
<span class="text-danger" ng-show="signUpUserForm.firstname.$invalid && signUpUserForm.firstname.$dirty ">First name is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname" class="col-md-12">Last Name:</label>
<div class="col-md-12">
<input ng-model="user.lastname" type="text" class="form-control" name="lastname" required />
<span class="text-danger" ng-show="signUpUserForm.lastname.$invalid && signUpUserForm.lastname.$dirty ">Last name is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="email" class="col-md-12">Email:</label>
<div class="col-md-12">
<input ng-model="user.email" type="email" class="form-control" name="email" required />
<span class="text-danger" ng-show="signUpUserForm.email.$error.required && signUpUserForm.email.$dirty ">Email is required</span>
<span class="text-danger" ng-show="signUpUserForm.email.$error.email && signUpUserForm.email.$dirty ">Please enter valid email</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password" class="col-md-12">Password:</label>
<div class="col-md-12">
<input ng-model="user.password" type="password" class="form-control" name="password" required />
<span class="text-danger" ng-show="signUpUserForm.password.$invalid && signUpUserForm.password.$dirty">Password is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="phone" class="col-md-12">Phone:</label>
<div class="col-md-12">
<input ng-model="user.phone" type="text" class="form-control" name="phone" required />
<span class="text-danger" ng-show="signUpUserForm.phone.$invalid && signUpUserForm.phone.$dirty">Phone is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-12">Country:</label>
<div class="col-md-12">
<select name="country" ng-model="user.country" type="text" class="form-control form-bg-white" required>
<!-- <option value="" disabled selected>Select Your Country</option> -->
<option value="" disabled selected></option>
<option ng-repeat="country in countries" value="{{country}}">{{country}}</option>
</select>
<span class="text-danger" ng-show="signUpUserForm.country.$invalid && signUpUserForm.country.$dirty">Country is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<!-- Button -->
<div class="form-group">
<div class="col-md-12">
<div class="icon-user-signup">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<button id="btn-signup" class="btn btn-primary col-md-12">SIGN UP</button>
</div>
</div>
<!-- <div class="mrg-top-10 col-md-12 text-right">
<h4><a ng-click="go('/seller#/signup')" class="ven-link">
Become a vendor today
</a></h4>
</div>-->
</div>
</div>
</div>
<!-- <div class="col-md-12 control">
<div class="signup-border" >
Already have an account ?
<a ui-sref="loginUser" >
Sign In Here
</a>
</div>
</div> -->
</form>
You need to initialize the $scope.customer first in controller
$scope.user = {};
I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.
<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">First Name:</label>
<input type="text" name="firstname"
ng-model="FirstName" class="form-control custom-form-control"
placeholder="First Name" required="required">
<span class="text-danger"
ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" name="lastname"
ng-model="LastName" class="form-control custom-form-control"
placeholder="Last Name" required="required">
<span class="text-danger"
ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email"
ng-model="Email" class="form-control custom-form-control"
ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/"
placeholder="Email" required="required">
<span class="text-danger"
ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
<span class="text-danger"
ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Phone Number:</label>
<div class="clearfix"></div>
<input type="text" name="phone"
ng-model="Phone" class="form-control custom-form-control"
placeholder="XXXXXXXXXX" required="required">
<span class="text-danger"
ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Message:</label>
<textarea class="form-control rounded-0" rows="5"
name="comment" placeholder="Message"
ng-model="Comment" required="required"></textarea>
<span class="text-danger"
ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Upload Resume:</label>
<!--<input type="file" name="ResumePath" id="filehandler" />-->
<input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
<!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
<label for="file1" class="form-control">
<span><i class="fa fa-file"></i> Drag file here or choose file</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
class="grecaptcha" ng-model="respone1"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" id="btnSubmit"
ng-click="uploadFiles()" value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
</div>
</div>
<div class="form-group text-center">
<h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
<h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
</div>
</div>
</form>
ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.
I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.
<form name="teamForm" ng-submit="uploadFiles()" class="formfields">
then, for the button you would specify it is the submission button and remove the ng-click.
<button type="submit" id="btnSubmit"
value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
I want to load data of a selected row in a form in order to update it. I successfully had the data loaded in the form, the but the problem is when I use ng model to save the data all the stuff have been put in the form fields disappear.
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="cout_total" class="form-control" disabled ng-model="cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="submit" class="btn btn-primary" ng-click="upadateProjet()">Valider</button>
</div>
</div>
</form>
this is the angularjs method:
$scope.updateProjet= function(){
$scope.projet={'ref_projet':$scope.refprojet,'intitule_fr':$scope.intitule_fr,'description':$scope.description,cout_total':$scope.cout_total};
$http.put("/editprojet", $scope.projet)
.success(function(data,status,headers,config){
});
}
rest controller
#RequestMapping(value="/editprojet",method=RequestMethod.PUT)
public Projet editProjet(#RequestBody Projet p) {
return projetMetier.editProjet(p);
}
you are using button type="submit"
it will clear the form use button tag
<button></button>
$scope.updateProjet= function(projData){
$http.put("/editprojet", projData)
.success(function(data,status,headers,config){
}).error(function(data){
console.log(data)
});
}
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="proj.ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="proj.intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="proj.cout_total" class="form-control" disabled ng-model="proj.cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="proj.description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="button" class="btn btn-primary" ng-click="upadateProjet(proj)">Valider</button>
</div>
</div>
</form>
</div>
have you tried removing the value attribute? this happened to me when I once added DOM forms on the fly, I managed by using jquery to force capture by:
$(this).find('.inputClass').val();
this sort of jequery is already embeded inside Angular so no need to add the the library.
have a quick question.
I have a form with whole bunch of fields that could be updated from UI.
I found a directive called "ng-model-option" that seems to be handling those kind of issues.
My question is: is it possible to rollback changes on whole form without specifying ng-model-options="{ updateOn: 'submit'}"
on every input fieldin my form?
Or, this directive look on every field and only submit those fields that were modified?
Thank you for your help and explanation in advance!
You could have all of your fields bound to a single object, i.e.
$scope.model = {
foo: '',
bar: '',
etc: ''
};
That way you could store a copy of the model, and reset the bound model at any point you wish.
For example to undo all of the changes after a failed service call:
$scope.submit = function() {
yourService.update(model).then(function(result) {
// handle the success.
}, function(err) {
$scope.model = $scope.originalModel;
});
}
Or maybe reloading the page is an option for you?
$window.location.reload();
i found a solution by using and mapping everything to ng-model-option directive
<form name="EditUserForm" class="col-md-12 form-horizontal top-buffer">
<div class="form-group">
<div class="col-sm-4 text-right">
<label>User Id:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.UserID" ng-disabled="true" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Department Name:</label>
</div>
<div class="col-sm-8">
<!--<input type="text" class="form-control info-textbox" ng-model="user.Department.DepartmentName" ng-readonly="isReadOnlyMode" />-->
<select class="form-control info-textbox" ng-options="department.DepartmentName for department in departments"
ng-model="selectedDepartment"
ng-readonly="isReadOnlyMode"
ng-model-options="{updateOn: 'submit'}"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>First Name:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.FirstName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Last Name:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.LastName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Email:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.Email" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Phone:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.Phone" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Login:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.LoginName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Password:</label>
</div>
<div class="col-sm-8">
<input type="password" class="form-control info-textbox" ng-model="user.Password" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<!--Buttons-->
<div class="form-group">
<div class="col-sm-4 text-right">
<button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="isReadOnlyMode">
<span>Edit</span>
</button>
<button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="!isReadOnlyMode">
<span>Cancel</span>
</button>
</div>
<div class="col-sm-4 text-left">
<button type="submit" class="btn btn-primary info-button" name="btnSave" ng-click="saveChangesToUser(user, isReadOnlyMode)" ng-show="!isReadOnlyMode">
<span>Save</span>
</button>
</div>
<div class="col-sm-4 text-left">
<div back-button></div>
</div>
</div>
</form>
and then controller
$scope.flipBetweenEditMode = function (isReadOnlyMode) {
if (!isReadOnlyMode) {
$scope.EditUserForm.$rollbackViewValue();
}
console.log(isReadOnlyMode);
$scope.isReadOnlyMode = !isReadOnlyMode;
};
on cancel this will roll back all the changes and restore model at its first stage.