How to switch form base of flag in HTML (Angular JS) - angularjs

I want to use same form for two different Views and I have two different roles.
1. Client
2. Manager
In my Controller I have added a flag based on the user role that is logged in.
$scope.userFlag=$rootScope.globalSession.UserRole,
If I login as a Manager then the value of $rootScope.globalSession.UserRole="Manager"
& If I login as a Client then the value of $rootScope.globalSession.UserRole="Client"
Now in my form I have added a condition to switch it -> ng-if="userFlag==Admin"
<form class="form-horizontal" name="UpdateAdminProfileForm" id="UpdateAdminProfileForm">
<h2>Update Profile</h2>
<hr>
<fieldset name="client" id="client" ng-if="userFlag==Admin">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Domain Name*</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Enter your username" class="form-control input-md" ng-model="theClient.OrganizationDomain" disabled>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="update"></label>
<div class="col-md-4">
<a><button id="update" name="update" class="btn btn-primary" ng-click="updateClient()">Update</button></a>
</div>
</div>
</fieldset>
<fieldset name="manager" id="manager" ng-show="userFlag==Manager">
<div class="form-group" ng-class="{ 'has-error': submitted && UpdateAdminProfileForm.myemail.$error.required || UpdateAdminProfileForm.myemail.$error.pattern }">
<label class="col-md-4 control-label" for="myemail">Email*</label>
<div class="col-md-4">
<input id="myemail" name="myemail" type="email" placeholder="Enter your email" class="form-control input-md" ng-model="theClient.Email" ng-pattern="regex.Email" ng-maxlength="20" required autofocus >
<span ng-show="submitted && UpdateAdminProfileForm.myemail.$error.required" class="help-block">Email can not be empty</span>
<span ng-show="UpdateAdminProfileForm.myemail.$error.pattern && UpdateAdminProfileForm.myemail.$invalid " class="help-block">Please enter a valid email</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button" ng-click="updateManager()">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
But its not working when I open the form, its empty and If I remove ng-if="userFlag==Admin" & ng-if="userFlag==Manager" from tags then it display the fields for both field set.
Image With FLAG
Image After Removing FLAG
Help! Thanks in advance.

It should be
ng-if="userFlag=='Admin'"

Try This
ng-if="userFlag=='Admin'" or ng-show="userFlag=='Manager'"

Related

AngularJS conditional required

I want to validate a form if an input text has value, or another one, or both of them.
For example
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Nickname:</label>
<input type="text" id="nickname" name="nickname" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit">
-- EDIT --
Ok now I have something weird, it seems that the "&&" operator doesn't work in HTML, so I'm a bit stuck..
Actually, with your help, my button can be clicked if the condition is verified. But strangely :
- Button is not disabled
- If the condition is not verified, my button doesn't display my ng-if message.
HTML
<form class="form-horizontal" role="form" name="myForm" novalidate>
<div class="card-body card-padding">
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Firstname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.firstname"
min-length="0"
name="firstname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.name"
min-length="0"
name="name"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.email"
min-length="0"
name="email"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Username</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.username"
min-length="0"
name="username"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Nickname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.nickname"
min-length="0"
name="nickname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group" data-ng-show="btnOk">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">
<span ng-if="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">Some required fields are missing</span>
<span ng-if="(myForm.username.$valid || myForm.nickname.$valid) && myForm.email.$valid && myForm.name.$valid && myForm.firstname.$valid">{{button}}</span>
</button>
</div>
</div>
</div>
</form>
How can I bypass this behavior ?
An option is to
Enclose them inside a form (give it a name)
Declare an ng-model for username and nickname inputs
Put the conditionals using the $valid/$invalid options of the objects created by AngularJS for the form components:
See below working example:
angular.module('app', []).controller('ctrl', function() {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="mForm" ng-app="app" ng-controller="ctrl as vm" novalidate>
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" ng-model="vm.username" id="username" name="username" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Username:</label>
<input type="text" ng-model="vm.nickname" id="nickname" name="nickname" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit" ng-disabled="mForm.username.$invalid && mForm.nickname.$invalid">
<div>Valid: {{!!(mForm.username.$valid || mForm.nickname.$valid)}}</div>
<form>
Resolved this by adding bool in my condition like:
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">
<span ng-if="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">Some required fields are missing</span>
<span ng-if="(myForm.firstname.$valid && myForm.name.$valid && myForm.email.$valid && (myForm.username.$valid || myForm.nickname.$valid))">{{button}}</span>
</button>
</div>

Ng-click validation is not working

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>

all the data is gone in the form when i put ng-model angularjs

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.

ng-form in ng-repeat and checking the validation status of all forms

So, I have a parent form with a nested set of ng-forms like this:
<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
<div class="col-xs-12 row-title">
<h1>{{ model.type || 'Delivery' }} address</h1>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="form" name="saveForm" ng-form>
<div class="form-group">
<label class="control-label">Company name</label>
<input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
<label class="control-label">House name/number</label>
<input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
</div>
<div class="form-group">
<label class="control-label">Street</label>
<input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
</div>
<div class="form-group">
<label class="control-label">Town</label>
<input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
</div>
<div class="form-group">
<label class="control-label">County</label>
<input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
<label class="control-label">Post code</label>
<input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
</div>
</div>
</div>
</form>
I then have a button:
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<div div class="row">
<div class="col-xs-6 tile">
<a class="red" ui-sref="^">
<i class="fa fa-trash"></i>
<div class="footer">Back</div>
</a>
</div>
<div class="col-xs-6 tile" ng-if="parentForm.$valid">
<a class="yellow" ui-sref="^.finance">
<i class="fa fa-arrow-right"></i>
<div class="footer">Continue</div>
</a>
</div>
</div>
</div>
</div>
I want this button to only show if all child forms are valid. I was hoping that I could just use parentForm.$valid but that doesn't work.
Does anyone know how to solve this?
Try to do parentForm.saveForm.$valid.
It will work
Nested forms aren't valid in HTML5 - but you can place your saveForm outside the parentForm and then use the input element's form attribute to specify a form for your input elements.
<form name="form1">
<input type="string" ng-model="form1input" required>
<input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>
Plunker: https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview

How to disable submit button untill all the fields are filled in a form?

I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE

Resources