<div>
<form class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false"
(ngSubmit)="submitForm()">
<fieldset>
<div class="form-group row">
<label class="form-control-label col-md-3 col-xs-12" for="task-id">
ID
<span class="help-block">
Number Only
</span>
</label>
<div class="col-md-9 col-xs-12">
<input type="text" id="task-id" name="task-id" class="form-control"
data-parsley-type="number"
required="required">
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" id="task-detail-submit-button" class="btn btn-danger btn-rounded pull-xs-right">Submit</button>
</div>
</form>
</div>
How can the Parsley stop invoking "submitForm()" during form submission when the input is invalid. In this case, "task-id" is not a number.
hope this code give you a idea
<form class="form-horizontal form-label-left parsleyjs" name="formname" method="post" data-parsley-priority-enabled="false"
(ngSubmit)="formname.valid && formname.submitForm()">
This code is not tested if it does not work sorry for it
Related
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.
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'"
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>
I am using CakePHP 3.x
I am trying to skin a themeforest theme into a CakePHP plugin.
Midway, I am deciding whether to skin a portlet into helper, element, or view cell.
The portlet html code looks something like this:
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> More Form Samples
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4>Inline Form</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Inline Form With Icons</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail22">Email address</label>
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword42">Password</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Horizontal Form</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword12" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="inputPassword12" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn blue">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Horizontal Form With Icons</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="inputEmail12" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="help-block">
with right aligned icon
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn green">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Column Sizing</h4>
<form role="form">
<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-3">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
The look is like this:
My question is how do we know when we should use Element? When we should use Helper? and When should we use View Cells?
And which case should I use for the above? I am leaning towards Helper.
Element
Use it when you need to repeat presentation related stuff, usually HTML, a lot. For example I have a project in which three tables use records of an addresses table. The form part of all of these three that contains the address data is an element.
Helper
Use it to encapsulate view logik, don't put HTML in it if possible or other presentation related things. For example let it do something and depending on the result you can use an element of that result type to render the data: return $this->_view->render('items/' . $type . '_item');
If you look at the core helpers for example the HtmlHelper you'll see a property $_defaultConfig:
protected $_defaultConfig = [
'templates' => [
'meta' => '<meta{{attrs}}/>',
'metalink' => '<link href="{{url}}"{{attrs}}/>',
/*...*/
These are the template strings that are used to generate the HTML output. This separtes the markup pretty nice from the actual code that generates it. Take a look at the FormHelper as well, it's using widgets to render more complex output.
So this works fine with element like pieces of markup. By a rule of thumb I would say if your markup is longer than what you see there make it an element and call it from within the helper or make it a widget.
View Cells
Think of view cells as "Mini MVC" stacks that have a view and can load multiple models. They're IMHO similar to AngularJS directives if you're familiar with them. See this article for an example. I really suggest you to read it, it explains them and their use cases in detail.
I haven't done much with them yet but they can be used to replace requestAction() calls for example. You won't "pollute" your controller with methods that are not intended to be access by a request.
Taken from the linked article above:
One of the most ill-used features of CakePHP is View::requestAction().
Developers frequently use this all over their applications, causing
convoluted cases where you need to figure out if you are within a web
request or an internal action request, cluttering controllers. You
also need to invoke a new CakePHP request, which can add some unneeded
overhead.
Disclaimer
The above reflects my personal view on these things, there is no ultimate and final rule how you have to use these three things. The goal is always clean and re-useable code and proper separation of concerns. How you archive that is up to you, you've got the tools. :)