angularjs form validation that has an internal form - angularjs

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.

Related

Angular - Only validate textbox on submit

Is there an ng-show expression I can use to only validate this textbox only when the submit button is clicked? Currently, it's displaying the error message while the user is typing into it.
<div ng-show="!vm.validEmployerCode && !form.EmployerCode.$error.required" class="errorMessage">
You have entered an invalid code
</div>
<div class="row">
<div class="col-xs-11">
<div class="form-group">
<label class="form-label" for="Code">Code</label>
<input ng-model="vm.code" name="Code" type="text" required id="Code" />
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="submit" class="btn btn-success col-md-4">
Sign Up
</button>
</div>
</div>
You could check $submitted flag inside your form object, basically that will become a true once you submit the form. So you need to add form.$submitted inside ng-show directive.
Markup
<div ng-show="form.$submitted && !vm.validEmployerCode && !form.EmployerCode.$error.required"
class="errorMessage">
You have entered an invalid code
</div>

form with ngform with save button validation not working angular.js

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

Date validation using ng-pattern is working, but also its get submitted when its in error

In my form I used ng-pattern for date, when i entered the wrong pattern and submit the form, its get submitted. Here my code.
<form role="form" name="editForm" ng-submit="saveRecord()">
<label class="control-label">DATE</label>
<input type="text" ng-model="userRecord.date" ng-pattern='/^((0[1-9]|1[012])[\/](0[1-9]|[12][0-9]|3[01])[\/](19|20)[0-9]{2})*$/'
name="date" class="form-control" required/>
<div role="alert">
<span style="color:red" ng-show="editForm.date.$dirty">
<span ng-show="editForm.date.$error.pattern">Incorrect Format, should be MM/DD/YYYY</span>
<span ng-show="editForm.date.$error.required">date is required.</span>
</span>
</div>
<button type="submit" class="btn btn-primary" >Save</button>
</form>
It will display the error also, but if i submit the form its get submited.
I have tried with several searches but could not find solution for this.
You can go down 2 paths:
Disable the form button as long as the form is invalid
You need to check in your form submit function if the form is valid or not
Solution 1
<button type="submit" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
Solution 2
<form role="form" name="editForm" ng-submit="saveRecord(editForm.$valid)">
And now in your controller do the next in the saveRecord function:
$scope.saveRecord = function(valid) {
if(!valid) { return; }
}
I think you have missed novalidate directory in form tag
like
<form role="form" name="editForm" ng-submit="saveRecord()" novalidate>
and edit also validate with submit button like
ng-show="editForm.$submitted && editForm.date.$error.pattern"
ng-show="editForm.$submitted && editForm.date.$error.required"
i hope its help
Below is the code to stop submitting page if pattern does not match
<span class="error" style="color:red" ng-show="externalLinkForm.link.$error.pattern">
Please use hash</span>
To study detail about the validation rule needed in ng-pattern please see the link to get in detail of the validation rules
https://www.w3schools.com/Jsref/jsref_obj_regexp.asp

How to force form validation before modal will close

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.

AngularJS validation on submit only

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>

Resources