masoud noursaid masoud noursaid - 3 months ago 17
AngularJS Question

angularjs form validation that has an internal form

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>

Answer

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.