Not working with ng-include #276

droidbuffer · 2017-02-11T11:30:58Z

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. (angular-validation.js:368)
at HTMLButtonElement.dispatch (jquery.js:3)
at HTMLButtonElement.r.handle (jquery.js:3)

hueitan · 2017-02-13T09:52:43Z

Do you mind post your script code here?

droidbuffer · 2017-02-14T03:11:27Z

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>

hueitan · 2017-03-01T11:31:40Z

Do you mind setup a fiddle/jsbin/others example so that I can look quickly?

pmohite13 · 2017-05-19T10:02:46Z

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()

codeuniquely · 2017-07-04T14:36:50Z

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

hueitan added enhancement Improvement Help-Wanted labels Jun 30, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not working with ng-include #276

Not working with ng-include #276

droidbuffer commented Feb 11, 2017 •

edited

Loading

hueitan commented Feb 13, 2017

droidbuffer commented Feb 14, 2017 •

edited by hueitan

Loading

hueitan commented Mar 1, 2017

pmohite13 commented May 19, 2017

codeuniquely commented Jul 4, 2017 •

edited

Loading

Not working with ng-include #276

Not working with ng-include #276

Comments

droidbuffer commented Feb 11, 2017 • edited Loading

hueitan commented Feb 13, 2017

droidbuffer commented Feb 14, 2017 • edited by hueitan Loading

hueitan commented Mar 1, 2017

pmohite13 commented May 19, 2017

codeuniquely commented Jul 4, 2017 • edited Loading

droidbuffer commented Feb 11, 2017 •

edited

Loading

droidbuffer commented Feb 14, 2017 •

edited by hueitan

Loading

codeuniquely commented Jul 4, 2017 •

edited

Loading