We Keep Coding

Parent ng-click action is getting triggered on child ng-click (from child, need to access $parentNodesScope for angular-tree-ui)

I’m trying to post Form and including angular-ui as one of element in form (http://plnkr.co/edit/6S881qNp3v7UI4Bo9pko?p=preview), whenever I am clicking “Insert Below”, form is getting posted (in addition to inserting one more input field)
event.stopPropagation() will also not work as to add tree ui , I have to take scope on parent and as soon as I get that, ng-click of parent is also getting called
Parent Controller
var app = angular.module('crudApp', [ 'ui.router', 'ngStorage', 'clockApp',
'myApp', 'plunker', 'radioB', 'timeTicker', 'TodoApp' ]);
app.constant('urls', {
BASE : 'localhost:3030',
USER_SERVICE_API : 'localhost:3030'
});
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url : '/',
templateUrl : 'partials/list',
controller : 'UserController',
controllerAs : 'ctrl',
resolve : {
users : function($q, UserService) {
console.log('Load all users');
var deferred = $q.defer();
UserService.loadAllUsers().then(deferred.resolve,
deferred.resolve);
return deferred.promise;
}
}
});
$urlRouterProvider.otherwise('/');
} ]);
Child Controller
var app = angular.module('plunker', ['ui.tree']);
app.directive('focus', function($timeout) {
return {
restrict: 'AC',
link: function(scope, element) {
$timeout(function(){
element[0].focus();
}, 0);
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.nodes = [{
value: "",
price: "",
nodes: []
}]
});
View - list.ftl
Everything is working fine except the data is saving from child controller’s
ng-click instead of parent (form input)
<div class="generic-container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="lead">User </span>
</div>
<div class="panel-body">
<div class="formcontainer">
<div class="alert alert-success" role="alert"
ng-if="ctrl.successMessage">{{ctrl.successMessage}}</div>
<div class="alert alert-danger" role="alert"
ng-if="ctrl.errorMessage">{{ctrl.errorMessage}}</div>
<form ng-submit="ctrl.submit()" name="myForm" class="form-
horizontal">
<input type="hidden" ng-model="ctrl.user.id" />
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable"
for="uname">Name</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.name"
id="uname"
class="username form-control input-sm"
placeholder="Enter your name" required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="pnumber">Phone
Number</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.pnumber" id="pnumber"
class="username form-control input-sm"
placeholder="Phone Number" required ng-minlength="3"
ng-maxlength="10" ng-pattern="ctrl.onlyNumbers" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="address">Address</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.address" id="address"
class="username form-control input-sm" placeholder="Address"
required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="work">Work</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.work" id="work"
class="username form-control input-sm" placeholder="Work"
required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="price">Price</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.price" id="price"
class="form-control input-sm" placeholder="Price" required
ng-pattern="ctrl.onlyNumbers" />
</div>
</div>
</div>
<!-- Adding multinode value - start -->
<div ng-controller="MainCtrl">
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle>
<div class='form-group'>
<input class='username form-control input-sm' ng-model='node.value' focus>
<input class='form-control' ng-model='node.price' focus>
</div>
<button class='btn btn-primary btn-sm' ng-click='$parentNodesScope.$modelValue.splice($index+1,0,{value:"New", nodes:[]});'>Insert below</button>
<button class='btn btn-primary btn-sm' ng-click='node.nodes.push({value: "New", nodes:[]});'>Insert child</button>
</div>
</script>
<div ui-tree>
<ol ui-tree-nodes ng-model="nodes" id="tree-root">
<li ng-repeat="node in nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
{{nodes}}
</div>
<div class="row">
<div class="form-actions floatRight">
<input type="submit" value="{{!ctrl.user.id ? 'Add' : 'Update'}}"
class="btn btn-primary btn-sm"
ng-disabled="myForm.$invalid || myForm.$pristine">
<button type="button" ng-click="ctrl.reset()"
class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset
Form</button>
</div>
</div>
</form>
</div>
</div>
</div>

angularjs 2 forms one page, one works, the other doesn't

I have no idea what I have done here.
I have this view:
<div class="row" ng-if="!controller.showLoginForm">
<div class="col-md-4 col-md-offset-4">
<form name="registerForm" ng-submit="controller.register(registerForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error': registerForm.email.$invalid && !registerForm.email.$pristine }">
<label class="control-label">Email</label>
<input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
<p ng-show="registerForm.email.$invalid && !registerForm.email.$pristine" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group">
<button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="registerForm.$invalid">Register</button>
</div>
</form>
<pre>{{ controller.model | json }}</pre>
</div>
</div>
<div class="row" ng-if="controller.showLoginForm">
<div class="col-md-4 col-md-offset-4">
<form name="form" ng-submit="controller.login(form.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error': form.email.$invalid && !form.email.$pristine }">
<label class="control-label">Email</label>
<input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
<p ng-show="form.email.$invalid && !form.email.$pristine" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.password.$pristine }">
<label class="control-label">Password</label>
<input class="form-control" name="password" type="password" ng-model="controller.model.password" ng-minlength="8" required />
<p ng-show="form.password.$error.minlength" class="help-block">Password is too short.</p>
</div>
<div class="form-group">
<button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="form.$invalid">Login</button>
</div>
</form>
<pre>{{ controller.model | json }}</pre>
</div>
</div>
The issue with this is that the login form works fine....validation and all...but the register form doesn't work at all.
ng-submit does nothing, none of the ng-class fire and ng-disabled doesn't work.
The controller looks like this:
(function () {
'use strict';
angular.module('widget.directives').controller('PkAuthenticateController', PkAuthenticateController);
PkAuthenticateController.$inject = ['pkAuthenticateService'];
function PkAuthenticateController(pkAuthenticateService) {
var self = this;
// Bindings
self.model = { email: '' };
self.showLoginForm = pkAuthenticateService.hasLogin;
// Method binding
self.register = register;
self.login = login;
//////////////////////////////////////////////////
function register(valid) {
if (valid) {
return pkAuthenticateService.register(self.model);
}
};
function login(valid) {
if (valid) {
return pkAuthenticateService.login(self.model);
}
};
};
})();
Can anyone spot what I have done wrong?

Angular form - disable validation by ng-required

I have a email field in a form:
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.model.signAgreement"
ng-model="vm.model.emails.beitEsek">
</div>
In my controller vm.isMailReqired is set to false but still the emailBox.$invalid is true and as a result my form controller(formsToSign) is false - formsToSign.$valid:false.
EDIT - entire form
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek">
</div>
<div class="col-xs-4">
<label>Secondary maik</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox1"
input-change = "vm.mailField"
ng-model="vm.model.emails.emailField"
>
</div>
<div class="col-xs-4">
<label>Manger Mail</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox2"
input-change = "vm.mailField"
ng-model="vm.model.emails.menahelEmailField"
>
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="vm.buttonDisableValidation || formsToSign.$invalid"
class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</form>
Thanks for any help.

I've tailored your example with one input elements and made the fiddle and it is working without any
issues.
I guess the issue is with other input elements. Try to debug with {{formsToSign.$error}} to find the error
HTML
<div ng-controller="MyController as vm">
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail {{vm.isMailReqired}}</label>
<input ng-required="vm.isMailReqired" pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox" ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek" />
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="formsToSign.$invalid" class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</div>
</div>
</form>
<p>
<b>{{formsToSign.$error}}</b>
</p>
</div>
JS
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = [];
function MyController() {
var vm = this;
vm.isMailReqired = true;
}

$invalid
boolean
True if at least one containing control or form is invalid.
mail
()\[\]\.,;:\s#\']+(\.[^()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^()[\]\.,;:\s#\']+\.)+[^()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox"ng-disabled="vm.model.signAgreement"ng-model="vm.model.emails.beitEsek">

Want to use Angularjs validation instead of Browser validation

I have a form which holds two ng-forms where i am validating the input. I have two questions regarding my forms.
1) In the input Company I want to validate for the minlength, but my approach seems not to work. How can i solve this problem?
2) I want to use Angularjs validation with my error messages but the browser automatically shows "This input is invalid" AND Internet Explorer does not validate at all. Where is my fault? I already tried nonvalidate and ng-required but then my form does submit without validation.
Here is the plunkr link : Plunkr
Thanks in advance,
YB
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.billingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="addressForm" ng-submit="submit()">
<div ng-form="shippingForm">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Lieferadresse</label>
</h3>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="shippingAddress.salutation" class="form-control" ng-change="refreshBillingAddress()" ng-required="true">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted && shippingForm.salutation.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firsname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="shippingAddress.prename" ng-required="true" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.prename.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="shippingAddress.surname" required="" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.surname.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="shippingAddress.company" required="" ng-minlength="10" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.company.$error.required">Required</span>
<span ng-show="submitted && shippingForm.company.$error.minlength">Minlength = 10</span>
</div>
</div>
</div >
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Rechnungsadresse</label>
<div ng-click="setBillingAddress()" ng-show="changeBillingAddress === false" class="btn btn-default pull-right">Ändern</div>
<div ng-click="cancelBillingAddress()" ng-show="changeBillingAddress === true" class="btn btn-danger pull-right">Abbrechen</div>
</h3>
</div>
<div ng-show="changeBillingAddress == false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
</div>
<div ng-show="changeBillingAddress == true">
<div style="margin-top: 5px">
<div ng-form="billingForm">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="billingAddress.salutation" ng-required="changeBillingAddress == true" class="form-control">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="billingAddress.prename" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.prename.required" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="billingAddress.surname" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.surname.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="billingAddress.company" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.company.$error.required"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div style="padding-top: 1em" class="col-md-12">
<button ng-click="previousTab(0)" class="btn btn-default pull-left">Back</button>
<button type="submit" class="btn btn-default pull-right">Next</button>
</div>
</div>
</form>
</body>
</html>

Here is your plunker, i corrected some parts (until Rechnungsaddresse):
http://plnkr.co/edit/luVETXTVCf2PkNAKzK1Z?p=preview
I guess you can use <form name="addressForm"... or <div ng-form="addressForm"
but both seems to make problems.
submitted was never set, so i added it in the way i guess you intended

Angular form inputs to array with Validation

Is there a way in angular js to push a list of managers(or any item) to an array with validation in angular. I basically want to create an array as the ng-model and still validate it. Is this possible to do or am i going about it the wrong way?
var app = angular.module("FormTest",[]);
app.controller("AppCtrl", ["$scope", function($scope){
var appCtrl = this;
appCtrl.appName = "Form Array";
$scope.managers = [""];
$scope.form = {};
$scope.form.managers = $scope.managers;
$scope.addManager = function(){
$scope.managers.push('');
}
$scope.removeManager = function(index){
if($scope.managers.length > 1){
$scope.managers.splice(index, 1);
}
}
}])
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector('html'), ["FormTest"]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="AppCtrl as app">
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<div class="btn btn-primary" ng-click="addManager()">add manager</div>
</div>
</div>
<form novalidate name="form">
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
</div>
<div class="col-md-1">
<div class="btn btn-default">
<span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
</div>
</div>
</div>
</div>
</form>
</div>

In your example, all right, except for that of the regular expression.
Look at the example code jsfiddle.
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<button class="btn btn-primary" ng-click="addManager()">add manager</button>
</div>
</div>
<form novalidate name="form">
Form valid={{form.$valid|json}}
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
{{form['manager'+$index].$error}}
</div>
<div class="col-md-1">
<div class="btn btn-default">
<button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
</div>
</div>
</div>
</div>
</form>