I have an Angular modal form that I'm styling with Bootstrap. I I want to validate when the user clicks "I Agree." (I don't want to submit the form because it is part of a larger form that will be submitted later.) How can I force this validation when the button is clicked? Also, should the form name be the same as the larger form or have its own name?
Modal:
<form name="agreementForm" novalidate>
<div class="form-group" ng-class="{
'has-error':agreementForm.signature.$invalid && !agreementForm.signature.$pristine
}">
<label class="control-label" for="signature">Signature</label>
<input type="text" id="signature" name="signature" ng-model="agreementForm.contact.signature"
placeholder="Signature (e.g., /John Doe/)" class="form-control" ng-minlength=1 ng-model-options="{ updateOn: 'blur' }" required />
<span ng-show="agreementForm.signature.$error.required && !agreementForm.signature.$pristine" class="help-block">
Please type your signature to agree</span>
</div>
<div class="modal-footer">
<button ng-click="$dismiss()" class="btn btn-warning">Cancel</button>
<button ng-click="$close()" class="btn btn-primary">I agree</button>
</div>
</form>
Would ng-submit solve your issue? For instance,
<form ng-submit="$close()">
<input type="text" ng-model="signature" ng-required="true"/>
<button type="submit">Submit</button>
</form>
It prevents the request being sent to the server and should still perform the validation on the form.
Related
I have a form by some input. and some time I have another form by some input into this form.
when I have not internal form, my parent form is valid, but when I have internal in original form and original form is valid(I see inputs complete truly) and internal form is not valid, my original form is invalid too. if click on submit1 I need to save input in original form and if click on submit2 i need to save internal inputs.
In the webform we have grouped validation. have we such grouped in webform in the angular validation for this case?
<form name="original" novalidate class="form-horizontal bv-form">
<div class="col-md-3 col-sm-6" ng-class="{ 'has-error': !original.name.$pristine && original.name.$invalid ,'has-success':!original.name.$invalid}">
<label>Name</label>
<input auto-focus class="form-control" type="text" name="name" ng-model="vm.original.name" required />
<i class="form-control-feedback glyphicon" ng-class="{ 'glyphicon-ok' : original.name.$dirty && original.name.$valid , 'glyphicon-remove': original.name.$dirty && original.name.$invalid}" data-bv-icon-for="firstName" ng-show="original.name.$dirty">
</i>
<div>
<span class="help-block " ng-show="original.name.$invalid && !original.name.$pristine">
name required
</span>
</div>
</div>
<form name="internal" novalidate class="form-horizontal bv-form">
<div class="col-md-3 col-sm-6" ng-class="{ 'has-error': !internal.name.$pristine && internal.name.$invalid ,'has-success':!internal.name.$invalid}">
<label>Name</label>
<input auto-focus class="form-control" type="text" name="name" ng-model="vm.internal.name" required />
<i class="form-control-feedback glyphicon" ng-class="{ 'glyphicon-ok' : internal.name.$dirty && internal.name.$valid , 'glyphicon-remove': internal.name.$dirty && internal.name.$invalid}" data-bv-icon-for="firstName" ng-show="internal.name.$dirty">
</i>
<div>
<span class="help-block " ng-show="internal.name.$invalid && !internal.name.$pristine">
name required
</span>
</div>
</div>
<button type="submit" id="submit2" class="btn btn-primary blue" ng-click="int=internal.$valid && $scope.save2()">
</form>
<button type="submit" id="submit1" class="btn btn-primary blue" ng-click="original.$valid && $scope.save()">
</form>
You should use ng-form instead of form if you are nesting forms inside a form for further information refer the ng-form documentation.
Nestable alias of form directive. HTML does not allow nesting of form
elements. It is useful to nest forms, for example if the validity of a
sub-group of controls needs to be determined.
I found my solution.
In this case I use ng-if for prevent validation for internal form when submitting external form.
If client working on external form I hidden the Internal form and I can submitting the external form. and when client try to submitting internal form I show it to client and I can validity the internal form inputs and submit it.
I have a form which is dynamically generating the fields, I am using ng-form for this. The form has an ng-repeat for input fields and the main form has a 'Save' button.
i.e when one of the input fields is dirty and has content, the save button should be enabled and should be disabled otherwise.
Here is my HTML Code :
<form class="form-horizontal" name="$parent.fSForm" novalidate ">
<fieldset class="form-group pl-sm" ng-repeat="fs in list track by $index">
<ng-form name="innerForm">
<div class="col-md-5">
<input type="text" class="form-control" autocomplete="off" name="fsl" ng-change="fileChanged()" ng-model="fs.path" placeholder="Add new here">
</div>
</ng-form>
</fieldset>
<a class="prop-toggle ng-binding" href="" ng-click="addNew()">Add More</a>
</form>
</div>
<div class="footer">
<span>
<button type="button" class="btn" ng-click="close()">Cancel</button>
</span>
<span>
<button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="fSForm.$error.fooname">Save</button>
</span>
</div>
So for my save button to be disabled when the form loads initially how should I go about validating that with an ng-form present? The save should be enabled when one of the input fields has some text in it. not sure how we can handle ng-disabled with ng-form within a form save button
I've this basic form implemented using AngularJS and Bootstrap:
http://jsfiddle.net/dennismadsen/0stwd03k/
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-submit="save()">
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.save = function () {
};
}
Result
The Name input field is required. When I click the submit button, I need the input field to have a red border if it's invalid. How can this be done?
Alternatively, if I unfocus the input field and it's still not valid, it would be great that the red corder is shown on that time, instead of waiting for the form submit.
Twitter Bootstrap has an has-error class, so I would use this in conjunction with ng-class for the form group, then a label with the label and label-danger classes for good measure:
<div class="form-group" ng-class="{'has-error': errors.Name }">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
<span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>
Then in your controller, have an errors object, and set the Name property of this to a string when the name is invalid.
The first thing you were missing was adding ng-model='name' to input field, then only will the form become invalid once you click submit, otherwise the form will always be valid since it considers that there is no field present.
Then I'd add the submitted class on the submit click button, then put the border css like .submitted would be the parent and .ng-invalid would be the child so we can put the style on .submitted .ng-invalid
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
</div>{{submitted}}
<button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
</form>
</div>
CSS
.submitted .ng-invalid{
border: 1px solid red;
}
Working Fiddle
Hope this could help you, Thanks.
Basically you need angular to take over validation, so add novalidate to form. Also add ng-class to input field to determine wether to add error css
<form name="myForm" novalidate ng-submit="test()">
<input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required. </span>
</span>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Good luck..
<form name="Form" class="form" data-ng-enter="saveInfo()" novalidate>
<div class="question-group">
<label class="question" for="FirstName">
Your first name*
<input id="FirstName" type="text" data-ng-model="app.FirstName" maxlength="40" required />
</label>
<label class="question" for="LastName">
Last name*
<input id="LastName" type="text" data-ng-model="app.LastName" maxlength="80" required />
</label>
</div>
<div style="margin: 0 auto; width: 155px;" class="button-center">
<button class="btn btn-success btn-lg" data-ng-click="saveInfo()" data-ng-disabled="Form.$invalid">
Save
</button>
</div>
I am disabling the save button if the form fails client side validations but when I hit enter in the input field it bypasses the client side validations and submits the form. I don't want that to happen. I want to submit the application when I hit enter if and only if it passes all the client side validations.
Is there any way to check if the button is disabled then data-ng-enter shouldn't work something like that?
You should use data-ng-submit instead of data-ng-enter
I want to implement some simple form validation in my AngularJS app, but I don't want it to show any validation errors until after the user has clicked the form submit button. I don't want it to validate as I type or even on exiting the field.
Is there a way to do this? I'll need to write at least one custom validator directive so it will need to work with that.
I am finding form validation in AngularJS to be very difficult so far, it's hard to get it to work exactly as you want.
You could do something like this. Here's an example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>