Develop Reference

Radio buttons inside directive in a ng-repeat not working in AngularJS

I have a set of radio buttons inside a directive. The directive has an ng-repeat, so it exists multiple times.
I'm able to populate the input fields of the directive, but the radio buttons won't react.
angular.module('account-form-client-de', [])
.controller('ctrl', function($scope) {
$scope.owners = [];
$scope.addOwner = function() {
$scope.owners.push({
class: 'person',
name: 'new owner',
percentage: 0
});
}
$scope.addOwner();
$scope.addOwner();
})
.directive("newOwner", function() {
var options = {
restrict: 'E',
replace: true,
scope: {
owner: '=',
remove: '&'
},
link: function(scope, element, attrs, controller, $parent) {
},
template: `
<div class="table-owners item-row">
<div class="checkbox">
<input type="radio" name="type" ng-model="owner.class" value="person" validate-on-change>
<label for="person" translate>
table_owners.person
</label>
</div>
<div class="checkbox">
<input type="radio" name="type" ng-model="owner.class" value="company" validate-on-change>
<label for="company" translate>
table_owners.company
</label>
</div>
<input name="owners_name" ng-model="owner.name" type="text" placeholder="" class="form-control input-md">
<input name="owners_percentage" ng-model="owner.percentage" type="number" placeholder="" class="form-control input-md">
</div>`
};
return options;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="account-form-client-de" ng-controller="ctrl">
<pre>{{owners}}</pre>
<new-owner ng-repeat="owner in owners track by $index" owner="owner"></new-owner>
<button ng-click="addOwner()">add owner</button>
</div>
Since both the inputs and radio buttons refer to a property in the owner object, I fail to see why the inputs bind, and the radio buttons won't even become checked.
Any ideas?

It's because when you have the same directive multiple times, you have the same radio buttons with the same values multiple times. Then, the HTML parser gets confused. I fixed it by wrapping each row in a <form> (which you don't have to submit), so it's valid again.
angular.module('account-form-client-de', [])
.controller('ctrl', function($scope) {
$scope.owners = [];
$scope.addOwner = function() {
$scope.owners.push({
class: 'person',
name: 'new owner',
percentage: 0
});
}
// Add two owners to begin with
$scope.addOwner();
$scope.addOwner();
})
.directive("newOwner", function() {
var options = {
restrict: 'E',
replace: true,
scope: {
owner: '=',
remove: '&'
},
link: function(scope, element, attrs, controller, $parent) {
},
template: `
<form class="table-owners item-row">
<div class="checkbox">
{{owner.class}}
<input type="radio" name="person" value="person" ng-model="owner.class">
<label for="person" translate>
table_owners.person
</label>
</div>
<div class="checkbox">
<input type="radio" name="company" value="company" ng-model="owner.class">
<label for="company" translate>
table_owners.company
</label>
</div>
<input name="owners_name" ng-model="owner.name" type="text" placeholder="" class="form-control input-md">
<input name="owners_percentage" ng-model="owner.percentage" type="number" placeholder="" class="form-control input-md">
</form>`
};
return options;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="account-form-client-de" ng-controller="ctrl">
<pre>{{owners}}</pre>
<new-owner ng-repeat="owner in owners track by $index" owner="owner"></new-owner>
<button ng-click="addOwner()">add owner</button>
</div>

How to use multiple ng-app and add new modal

Here is my todo.js file
//let example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope, $localStorage) {
$scope.save = function() {
let testObject = [
{
name:"aaa",
lastName:"bbb"
},
{
name:"ccc",
lastName:"ddd"
}
]
let myVal = $localStorage.myKey;
$localStorage.$reset();
if(!myVal){
console.log("okey");
$localStorage.myKey = testObject;
} else {
myVal.push({
name:"fff",
lastName:"ggg"
})
$localStorage.myKey = myVal;
}
$scope.datas = $localStorage.myKey;
}
$scope.load = function() {
console.log($localStorage.myKey)
}
});*/
var app = angular.module("modalFormApp", ['ui.bootstrap']);
app.controller("modalAccountFormController", function ($scope, $modal, $log) {
$scope.showForm = function () {
$scope.message = "Show Form Button Clicked";
console.log($scope.message);
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
userForm: function () {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
$scope.form = {}
$scope.submitForm = function () {
if ($scope.form.userForm.$valid) {
console.log('user form is in scope');
$modalInstance.close('closed');
} else {
console.log('userform is not in scope');
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
And here is my index.html file:
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="../node_modules/angular-1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
<script src="./todo.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
</head>
<body>
<!--<div ng-app="example">
<div ng-controller="ExampleController">
<button ng-click="save()">Save</button>
<button ng-click="load()">Load</button>
<br>
<input type='text' ng-model='searchText' placeholder="Search..." />
<ul>
<li ng-repeat="data in datas | filter:searchText">
{{data.name}}
</li>
</ul>
</div>
</div>-->
<div ng-app="modalFormApp">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header">
<h1>AngularJS Form Validation</h1>
</div>
<div ng-controller="modalAccountFormController">
<div class="page-body">
<button class="btn btn-primary" ng-click="showForm()">Create Account</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Lastly here is my modal.html:
<div class="modal-header">
<h3>Create A New Account!</h3>
</div>
<form name="form.userForm" ng-submit="submitForm()" novalidate>
<div class="modal-body">
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<p ng-show="form.userForm.name.$invalid && !form.userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="form.userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="form.userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email" required>
<p ng-show="form.userForm.email.$invalid && !form.userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" ng-disabled="form.userForm.$invalid">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
I'm trying to open a modal when i click the button. I made comment line the other part which i'm using but it works fine. The second part is for only the modal but it is not working. I even can not open the modal. If there is a basic way to do this can you share with me? I only need to open this modal. I can handle the rest of it.

From the Docs:
There are a few things to keep in mind when using ngApp:
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
For more information, see
AngularJS ng-app Directive API Reference

Show Input Error Using Custom directives Without Using NgMessages

I Have input and I use a custom directive to display the input error with use of ng-messages. And I want to use attribute for showing the error, not ng-message.
Here is my Code
<md-input-container class="md-block" flex-gt-sm>
<label>Enter Your Message</label>
<input required md-no-asterisk ng-model="newEmployee.message" type="text" id="name" name="name" formValidate>
<div ng-messages="Employeeform.message.$error">
<div ng-message="messageValidator">Message is Invalid
</div>
</md-input-container>
Directive :
app.directive('formValidate', function() {
return {
restrict: 'A',
require: 'ngModel',
template: '<p>Name is required</p>',
link: function(scope, element, attr, ctrl) {
function formValidate(ngModelValue) {
if ([A - z].test(ngModelValue)) {
ctrl.$setValidity('formValidate', false)
} else {
ctrl.$setValidity('formValidate', true),
}
return ngModelValue;
}
ctrl.$parsers.push(formValidate);
}
};
});

Make use of angular-form. Go through this doc https://docs.angularjs.org/guide/forms
Without ng-messages
<div class="form-group" ng-class="{ 'has-error': vm.form.firstname.$touched && vm.form.firstname.$invalid }">
<label class="control-label col-xs-3" for="firstname">First Name</label>
<div class="col-xs-9">
<input class="form-control" name="firstname" id="firstname" ng-model="vm.firstname" type="text" ng-change = "vm.resetValidationErrors('firstname')" required/>
<p ng-show="vm.form.firstname.$error.required && vm.form.firstname.$touched" class="help-block">First name is required.</p>
<p ng-show="vm.form.firstname.$error.firstname && vm.form.firstname.$touched" class="help-block">{{ vm.form.firstname.errorMessage }}</p>
</div>
</div>

Controller reading component data

My idea is to create a big form from separated components. So this is my main template:
<form novalidate>
<div class="row">
<user></user>
</div>
<button type="button" class="btn btn-default" ng-click="submit()"> Submit </button>
</form>
and its controller (the template is binded from ui route config to the controller)
(function () {
'use strict';
angular.module('app')
.controller('formCtrl', formCtrl);
function formCtrl ($scope) {
$scope.submit = function() {
console.log("read data");
}
}
})();
Now, the user component:
(function () {
'use strict';
var module = angular.module('app.user');
module.component("user", {
templateUrl: "app/user/user.html",
controllerAs: "model",
controller: function () {
var model = this;
model.user = {};
}
});
})();
and the user template:
<form novalidate>
<form-group>
<label for="inputUser"> Name <label>
<input ng-model="model.user.name" id="inputUser" type="text" placeholder="User"/>
</form-group>
<form-group>
<label for="inputUser"> Email <label>
<input ng-model="model.user.email" id="inputUser" type="email" placeholder="Email"/>
</form-group>
<div>
{{model.user | json}}
</div>
</form>
Now I want to be able to read user data when the user do the submit. How can I do it?

When using components, depending on the type of component (smart or dumb), you have to emit an output to the parent controller to handle such thing. But in this case, you can use ngModel to handle a model and change it on the parent from within the component. For example:
Working snippet:
angular.module('app', [])
.controller('formCtrl', function($scope) {
$scope.user = {};
$scope.submit = function() {
console.log($scope.user);
}
})
.component("user", {
bindings: {
user: '=ngModel'
},
templateUrl: "app/user/user.html",
controllerAs: "model",
controller: function() {}
});
angular.element(function() {
angular.bootstrap(document, ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<form novalidate ng-controller="formCtrl">
<div class="row">
<user ng-model="user"></user>
</div>
<button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
</form>
<script type="text/ng-template" id="app/user/user.html">
<form novalidate>
<div>
<label for="inputUser">Name
<label>
<input ng-model="model.user.name" id="inputUser" type="text" placeholder="User" />
</div>
<div>
<label for="inputUser">Email
<label>
<input ng-model="model.user.email" id="inputUser" type="email" placeholder="Email" />
</div>
<div>
{{ model.user | json }}
</div>
</form>
</script>

A possible solution would be $$childTail. So if I want to access to user:
$scope.$$childTail.model.user

Dynamically display form data using AngularJS

I would like to dynamically display Person and Address data using label and input value in Summary Section. As the user edits the form fields, a list items with label + value should display in the summary tables. If value has been removed in the form, that associated label and value should be removed from the Summary Section.
I have added client side validation for each input element. I tried to solve this and couldn't figure out what is best way to do it. Any help would be appreciated.
Example:
// the main (app) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.vm = {
caller: {
person: {
firstName: '',
lastName: '',
phoneOne: '',
email: ''
},
address: {
lineOne: '',
lineTwo: ''
}
}
};
$scope.save = function() {
console.log($scope.vm);
}
});
// add a directive
myApp.directive('showErrors', function($timeout, $compile) {
return {
restrict: 'A',
require: '^form',
link: function(scope, el, attrs, formCtrl) {
// find the text box element, which has the 'name' attribute
var inputEl = el[0].querySelector("[name]");
// convert the native text box element to an angular element
var inputNgEl = angular.element(inputEl);
// get the name on the text box
var inputName = inputNgEl.attr('name');
// only apply the has-error class after the user leaves the text box
var blurred = false;
inputNgEl.bind('blur', function() {
blurred = true;
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$watch(function(scope) {
return formCtrl[inputName].$invalid;
}, function(invalid, scope) {
// we only want to toggle the has-error class after the blur
// event or if the control becomes valid
if (!blurred && invalid) {
return
}
el.toggleClass('has-error', invalid);
});
scope.$on('show-errors-check-validity', function() {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$on('show-errors-reset', function() {
$timeout(function() {
el.removeClass('has-error');
}, 0, false);
});
}
}
});
.form-group .help-block {
display: none;
}
.form-group.has-error .help-block {
display: inline;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="claimForm" ng-submit="save()">
<h3>PERSON</h3>
<div class="col-md-6">
<div class="form-group form-caller" show-errors>
<label class="control-label">First Name<span class="help-block" ng-if="claimForm.callerFirstName.$error.required"><i>[required]</i></span>
</label>
<input type="text" name="callerFirstName" ng-model="vm.caller.person.firstName" class="form-control" required="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group form-caller" show-errors>
<label class="control-label">Last Name<span class="help-block" ng-if="claimForm.callerLastName.$error.required"><i>[required]</i></span>
</label>
<input type="text" name="callerLastName" ng-model="vm.caller.person.lastName" class="form-control" required="" />
</div>
</div>
<hr />
<h3>ADDRESS</h3>
<div class="col-md-6">
<div class="form-group" show-errors>
<label class="control-label">Address Line 1<span class="help-block" ng-if="claimForm.addressOne.$error.required"><i>[required]</i></span>
</label>
<input type="text" name="addressOne" ng-model="vm.caller.address.lineOne" class="form-control" required="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group" show-errors>
<label class="control-label">Address Line 2<span class="help-block" ng-if="claimForm.addressTwo.$error.required"><i>[required]</i></span>
</label>
<input type="text" name="addressTwo" ng-model="vm.caller.address.lineTwo" class="form-control" required="" />
</div>
</div>
<hr />
<input type="submit" id="submit" value="SUBMIT" class="btn btn-primary btn-lg" />
{{vm | json }}
</form>
<h2>Summary</h2>
<div id="person">
<h3>PERSON </h3>
</div>
<hr />
<div id="address">
<h3>ADDRESS</h3>
</div>
</body>
Thanks in Advance