angular-validation
angular-validation copied to clipboard
hueitan
Not working with ng-include
Hey,
my form to be validated is within an ng-include directive, and my validation is on submit, but when i click the submit button, I'm getting this error in
This is not a regular Form name scope
Provider.validate @ angular-validation.js:183
(anonymous) @ angular-validation.js:367
dispatch @ jquery.js:3
r.handle @ jquery.js:3
angular-validation.js:368 Uncaught TypeError: $validationProvider.validate(...).success is not a function
at HTMLButtonElement.
this is my app.js config for validator
app.config([ '$validationProvider', function($validationProvider) {
$validationProvider.showSuccessMessage = false;
$validationProvider.setValidMethod('submit');
} ])
this is my ng-include, i'm setting the ng-include from my controller
<html ng-app="adminapp" ng-controller="MainCtrl">
<div ng-include="masterscreen" ></div>
</html>
and this is the form i'm loading from my controller to the ng-include
<div ng-controller="AddForm">
<form name="AddForm">
<p class="arguments ">
<h4 class="popup-headingtabs">ADD LOG</h4>
<table class="popup-arguments ">
<tr>
<td style="width: 200px;">Service Type<font color="red">
*</font></td>
<td><input type="text" class="fieldwidth-text-long"
name="serviceType" ng-model="Add.serviceTyp"
validator="required" /></td>
</tr>
<tr>
<td colspan="4" align="center">
<button validation-submit="AddForm" ng-click="savemodal()"
class="btn btn-default">Save</button>
</td>
</tr>
</table>
</form>
</div>
Do you mind setup a fiddle/jsbin/others example so that I can look quickly?
Same issue: Here is my code: This is app.js config
app.config(function (validationSchemaProvider) {
var volunteerRule = {
pincode: {
'validations': 'required,number',
'validate-on': 'blur',
'messages': {
'number': {
'error': 'That does not seems to be a pincode'
}
}
}
}
validationSchemaProvider.set("volunteerRule", volunteerRule);
This is shell html page
<div ng-controller="volunteerController" ng-init="initializeController()" ng-cloak>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Volunteer</div>
</div>
<div class="panel-body">
<form name="volunteerForm" class="form-horizontal" validation-schema schema="volunteerRule">
<uib-tabset active="active" validation-schema schema="volunteerRule">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" select="setTabIndex($index)">
<div ng-include="tab.template"></div>
</uib-tab>
</uib-tabset>
<div class="form-group">
<div class="aab controls col-md-4 "></div>
<div class="controls col-md-8 ">
<button class="btn btn-primary" ng-click="validate(volunteerForm)">{{buttonLabel}}</button>
</div>
</div>
</form>
</div>
</div>
</div>
This is template html page -> tab
<div id="div_id_pincode" class="form-group required">
<label for="id_pincode" class="control-label col-md-4 requiredField">Pincode<span class="asteriskField">*</span> </label>
<div class="controls col-md-8 ">
<input class="input-md textinput textInput form-control controlWidth" id="pincode" name="pincode" ng-model="data.pincode" placeholder="pincode" style="margin-bottom: 10px" type="text" />
</div>
</div>
Nothing happens with this code. No validation is fired on 'blur' and also it passes through form.validate()
This is how I pull in sub-forms
I define a new directive for the form inputs - usually in it own folder so I can just require the folder and just get index.js to bind it all together
// ==========================================================
// index.js
// ==========================================================
import angular from 'angular';
import directive from './directive';
export default angular.module('myApp.address-form', [])
.directive('addressForm', directive)
.name;
Then I create the directive which references the template and controller
// ==========================================================
// directive.js
// ==========================================================
import template from './template.html';
import controller from './controller';
/* @ngInject */
export default function() {
return {
restrict: 'E',
scope: {
model: '='
},
template: template,
controller: controller
};
}
and create a simple controller to inject the validation
// ==========================================================
// controller.js
// ==========================================================
export default class AddressFormController {
/* @ngInject */
constructor($injector) {
this.$validationProvider = $injector.get('$validation');
}
}
And then its a matter of just defining the mark-up that goes inside - with your normal components / inputs
<!--
// ==========================================================
// template.html
// ==========================================================
-->
<h2>New Address<h2>
<label for="line1" >Line 1</label>
<input
ng-class="{focus:form.line1.$focus===true}"
ng-attr-type="text"
name="line1"
ng-model="model.line1"
maxlength="50"
ng-focus="form.line1.$focus=true"
ng-blur="form.line1.$focus=false"
validator="required, ...... "
invalid-callback="invalidMsg(message)"
autocomplete="off" />
.
.
.
This can then be called from the apps page and pulled into any page mark-up - by just adding a simple call to the the directive inside a form
<form name="form" novalidate class="css-form" ng-class="{submitted:form.submitted}" ng-cloak>
<address-form model="model"></address-form>
<button class="btn btn-lg btn-secondary" ng-click="cancel(form)">cancel</button>
<button class="btn btn-lg btn-primary" ng-click="save(form)">save</button>
</form>
Whilst I know that I'm not using <ng-include> to pull in the template - it does allow me to pull in templates forms and have them validate without issue. I use this approach across many applications and it works just as you would expect validation to work
