I have a large form that I have splitted into tabs. Each tab contains multiple different input fields with validation on the inputs. Right now I only have validation per input field, but I'm now trying to add validation per tab. That is, I want the tabs to indicate if any of its input field contains validation errors.
The form is rendered using ngRepeat:
<form name="createForm" novalidate>
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<a ng-hide="tab.isValid" data-target="#tab{{$index + 1}}" data-toggle="tab" class="invalid">{{tab.title}}</a>
<a ng-show="tab.isValid" data-target="#tab{{$index + 1}}" data-toggle="tab">{{tab.title}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<div ng-include="'/view/create/partials/' + tab.content"></div>
</div>
</div>
</form>
The array of tabs:
$scope.tabs = [
{ title: "Tab1", content: 'tab1.html', isValid: true },
{ title: "Tab2", content: "tab2.html", isValid: true },
{ title: "Tab3", content: "tab3.html", isValid: true }];
The HTML for each tab:
<label for="age">Age</label>
<input type="text" class="form-control" ng-model="person.tab1.Age" name="Age" maxlength="3" data-integer />
<label for="height">Height</label>
<input type="text" class="form-control" ng-model="person.tab1.Height" name="Height" data-float />
The 'data-integer' and 'data-float' are custom validation directives:
var INTEGER_REGEXP = /^\d*$/;
app.directive('integer', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
ctrl.$setValidity('integer', true);
return parseInt(viewValue);
} else {
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});
My idea is to set the 'isValid' variable to false if any of its child input fields are invalid. I'm not sure where to execute this function or how this function would look like. I'm also very welcome for ideas on improvement or other ways to do this.
You group validation by using a form, so in a simple scenario each tab would have a separate form. However, I understand you want to have a root form for handling the submission, but group tab fields together to give a finer-grained UI response to validation.
In that case, you can use nested forms. See this example for more information. You'll have a root form (named, of course) and then declare additional ng-form for each group within it. Note that you must use the ng-form directive specifically for the nested forms because browsers won't let you nest form tags; ng-form directive as an element works around that.
For you, this means you'd keep your parent form as is. Then you just wrap the fields in each tab with their own ng-form directive, giving each a unique name representing each tab. The validity of each tab will be reflected in the root form (createForm) so you can still check if the form is valid overall using the typical approaches e.g. createForm.$invalid, etc. However, you can now check the state of the nested forms, too e.g. createForm.Tab1Form.$valid.
The only catch here is that ng-form does not evaluate the name attribute, it uses the literal value, so you'll have troubles generating that name dynamically from the tab.title like you probably want to do. I got around that by giving them a literal name in the template.
<form name="createForm" novalidate="">
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<a data-target="#tab{{$index + 1}}" data-toggle="tab" ng-class="{'invalid': createForm.{{tab.title}}.$invalid}">{{tab.title}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<div ng-include="tab.content"></div>
</div>
</div>
</form>
Here's the plunk.
You'll notice that the tab titles are red if the tab's nested form is invalid (type a value into Field 1 and you'll see the validation error class go away). Note that I didn't wire up your Bootstrap JavaScript behaviors in the demo because I'm lazy, but I believe I've illustrated the point.
Related
I have the following structure
<div id="contractTab" class="ui top attached large tabular menu">
<a id="main-tab" class="item active" data-tab="first" ng-show="ctrl.currentTabsGroup == 'main'">some data</a>
<a id="supplier-tab" class="item" data-tab="third" ng-show="ctrl.currentTabsGroup == 'supplier'">some data2</a>
<a id="position-tab" class="item" data-tab="fourth" ng-show="ctrl.currentTabsGroup == 'position'">some data3</a>
<a class="item" data-tab="second" ng-show="ctrl.currentTabsGroup == 'main'">some data4</a>
</div>
And each tab looks like
<div class="ui bottom attached tab segment" data-tab="third">
<div class="ui basic segment">
<ng-form name="supplierForm">
...
</ng-form>
</div>
</div>
I have many fields required in each form. The problem is that when I try to validate form when this form is active(on screen), I get that it is invalid. For, example supplierForm.$valid == false
However, if I move to different form everything apparently erases and I get
supplierForm.$valid == true
Is there a way to connect all of this forms in order not to lose data?
This function is called when I change tabs
resetFormObject(formName);
$s[formName].$setPristine();
$timeout(function() {
document.getElementById(tabId).click();
}, 20);
Where resetFormObject just initializes active object to send it when the form is submitted
I'm getting started with Angular.js and I'm wondering how to do something along the lines of this (pseudocode):
<li ng-repeat="item in items">
<# if(item.dataType == "string") { #>
<input type="text" />
<# } else if(...) { #>
<input type="password" />
<# } #>
</li>
I know the above code is not angularish, and I know that for simple processing I could use a conditional ng-hide or ng-show or something similar. But for complex behavior, if I had to perform various data checks and business logic, how could I dynamically generate DOM elements with Angular.js?
Within the angular world, DOM manipulation is accomplished using angularjs directives. Here is the angular documentation on directives: https://docs.angularjs.org/guide/directive, you would do well to read through this.
Here is some sample code that will accomplish the idea of your psuedo code:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function ($scope){
$scope.items = [
42, "hello, world!", 3.14, "i'm alive!"
]
});
myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function (scope, element, attrs) {
if (typeof scope.current === "string") {
element.append('<input type="text">');
} else {
element.append('<input type="password">');
}
}
}
});
and here's how the html would look:
<div ng-controller="MyController">
<ul ng-repeat="item in items" ng-init="current = item">
<my-input-directive></my-input-directive>
</ul>
</div>
Here is a plnkr with the working example: http://plnkr.co/edit/iiS4G2Bsfwjsl6ThNrnS?p=preview
Directives are how the DOM is manipulated in angular. First thing to notice is that angular has a set of directives that come out of the box, we're using a few above (ng-repeat, ng-init, ng-controller). Above we've created a custom directive that will analyze the data type of each item in the items array of our MyController controller, and append the correct html element.
I imagine that you already understand the ng-repeat directive, so I'll skip that. I'll explain what I'm doing with the ng-init directive though. The ng-init directive allows you to evaluate an expression in the current scope. What this means is that we can write an expression that is evaluated in our current controllers scope, in this case the MyController scope. I am using this directive to create an alias for our current item named current. We can use this inside our directive to check what type the current item in the array iteration is.
Our directive myInputDirective, is returning an object with a few different properties. I won't explain them all here (I'll let you read the documentation), but I will explain what the link function is and what I am doing with it. A link function is typically how we modify the DOM. The link function takes in the current scope (in this case the scope of MyController), a jqLite wrapped element that is associated with the directive, and the attrs which is a hash object with key-value pairs of normalized attribute names and values. In our case, the important parameters are the scope, which contains our current variable, and the element, which we will append the correct input onto. In our link function, we're checking the typeof our current item from our items array, then we are appending an element onto our root element based on what the type of the current item is.
For this particular problem, what I'm doing above is overkill. But based off of your question I figured you were looking for a starting point for more advanced uses of angular apart from the built in directives that angular provides. These are somewhat advanced topics in angular, so I hope that what I've said make some sense. Check out the plunker and play around with it a bit, and go through some of the tutorials on https://docs.angularjs.org/guide. Hope this helps!
You can use ng-show to conditionally hide and show elements e.g.:
<input ng-show="item.dataType === 'string'" type="text"/>
<input ng-show="..." type="password"/>
Assuming your object looks like this:
$scope.items = [
{
dataType: 'string',
value: 'André Pena'
},
{
dataType: 'password',
value: '1234'
},
{
dataType: 'check',
value: true
}
];
Option #1 - ng-switch plunker
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items">
<div ng-switch="item.dataType">
<div ng-switch-when="string" ><input type="text" ng-model="item.value" /></div>
<div ng-switch-when="password" ><input type="password" ng-model="item.value" /></div>
<div ng-switch-when="check" ><input type="checkbox" ng-model="item.value" /></div>
</div>
</li>
</ul>
</body>
Option #2 - ng-show plunker
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items">
<div ng-show="item.dataType == 'string'" ><input type="text" ng-model="item.value" /></div>
<div ng-show="item.dataType == 'password'" ><input type="password" ng-model="item.value" /></div>
<div ng-show="item.dataType == 'check'" ><input type="checkbox" ng-model="item.value" /></div>
</li>
</ul>
</body>
Option #3 - ng-hide plunker
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items">
<div ng-hide="!(item.dataType == 'string')" ><input type="text" ng-model="item.value" /></div>
<div ng-hide="!(item.dataType == 'password')" ><input type="password" ng-model="item.value" /></div>
<div ng-hide="!(item.dataType == 'check')" ><input type="checkbox" ng-model="item.value" /></div>
</li>
</ul>
</body>
You should use the ng-if directive.
<input ng-if="item.dataType === 'string'" type="text"/>
<input ng-if="..." type="password"/>
The problem with using ng-show like #rob suggested, is that it only uses CSS to hide the element, which is not ideal if you want the two inputs to have the same name/ID.
ng-if will remove the element from the DOM if the condition is not true.
for a problem this simple there's no need to go and implement your own directive.
All the examples I see are for DOM elements that are explicitly written on the page. In my case I am using the knockout foreach to create a list of items in my observable array:
<div class="tab-pane fade" id="recruiting">
<input type="text" data-bind="value: selectedOrgKey" id="orgSectionId" onchange="FlipOrgView()" style="visibility: hidden;" />
<ul class="list-unstyled" data-bind="foreach: orgs">
<li data-bind="attr: { id: 'orgSection' + orgId}" class="orgSection">
I am currently using a kludgy solution by using the onchange on an hidden element to grab the id and .show() it.
window.OrgDdlUpdated = function () {
$(".orgSection").hide();
var selectedOrgId = $('#orgDropDown').val();
//alert(selectedOrgId);
flipOrgView(selectedOrgId);
};
var flipOrgView = function (id) {
$('#orgSection' + id).show();
};
This technically works, the first time, but as I flip through it all, the selected id lags behind to where it shows the previous selection, not the current one. I know there are various ways to achieve this, so knockout or otherwise, how can i properly toggle the visibility of an array of objects using the knockout foreach method?
how about:
<div class="tab-pane fade" id="recruiting">
<input type="text" data-bind="value: selectedOrgKey" id="orgSectionId" style="visibility: hidden;" />
<ul class="list-unstyled" data-bind="foreach: orgs">
<li data-bind="visible: $parent.selectedOrgKey() === orgId(), attr: { id: 'orgSection' + orgId}" class="orgSection">
im not too sure in your example how you are setting selectedOrgKey but this should do the MVVM behavior i think you are getting at.
I'm building my first Angular app, but am having a bit of trouble getting something to work. I have a video container that will be hidden until $scope.video.show = true; I'm trying to set this value when I click on a link. I'm trying to make that happen in a directive. Any help would be appreciated.
html:
<div ng-controller="AppCtrl">
<div ng-cloak
ng-class="{'show':video.show, 'hide':!video.show}">
// youtube iframe content, for example
</div>
<div>
<ul>
<li>
<h3>Video Headline 1</h3>
<button type="button"
video-show
data-video-id="jR4lLJu_-wE">PLAY NOW 〉</button>
</li>
<li>
<h3>Video Headline 2</h3>
<button type="button"
video-show
data-video-id="sd0f9as8df7">PLAY NOW 〉</button>
</li>
</ul>
</div>
</div>
javascript:
var thisViewModel = angular.module("savings-video", [])
.controller('SavingsVideoController', function($scope) {
$scope.video = {
show : false,
videoId : ""
};
};
thisViewModel.directive("videoShow", function(){
return{
restrict: 'A',
link: function(scope , element){
element.bind("click", function(e){
var $this = angular.element(element);
$this.closest('li').siblings().addClass('hide'); // hide the other one
$this.closest('li').removeClass('hide'); // keep me open
scope.video.show = true; // doesn't work.
// what is the best way to do this?
});
}
}
});
I see a few things you can improve.
Checkout ngShow/ngHide and ngIf; they'll give you toggle-ability more easily than trying to do it from scratch.
Think in angular. Rather than trying to use logic to modify the DOM on your own, simply setup your rules using angular directives, and let the framework do the rest for you.
For example, it seems like this is more what you want.
<div ng-controller="AppCtrl">
<div ng-cloak ng-show='video.show">
// youtube iframe content, for example
</div>
<div>
<ul ng-switch="video.videoId">
<my-video my-video-id="jR4ABCD" my-headline="Video Headline 1" ng-switch-when="myVideoId" my-video-manager="video" />
<my-video my-video-id="al1jd89" my-headline="Video Headline 2" ng-switch-when="myVideoId" my-video-manager="video"/>
</ul>
</div>
</div>
What I changed is making your iframe show conditionally with ngShow, and using ngSwitch to control which video appears (the appearing video is based on the $scope's video.videoId). Then, I turned your <li>s into a directive called my-video, which ends up looking like this
thisViewModel.directive("my-video", function(){
return{
restrict: 'E',
replace: true,
scope: {
myVideoId = "=",
myHeadline = "=",
myVideoManager = "="
},
template = '<li><h3>{{myHeadline}}</h3><button type="button" ng-click="play()">PLAY NOW 〉</button></li>',
link: function(scope , element){
scope.play = function(){
myVideoManager.show = true;
/*whatever you want here, using scope.myVideoId*/
}
}
}
});
This directive does exactly what your old HTML did, but brings it into the angular framework so you can access the properties you're looking for. By using the raw angular directives, I eliminate the need for any manual UI logic; I don't need to access element at all anymore, and both my HTML and JavaScript are cleaner. There's certainly room for improvement here, even, but I would say that this is closer to the right track.
It takes practice to get more familiar with, but following the guidelines in the SO link above will help.
EDIT
Sorry, think I missed a requirement the first time around. If you want both videos to show when none are selected, don't use ng-switch; just set up some manual ng-shows.
<div>
<ul>
<my-video my-video-id="jR4ABCD" my-headline="Video Headline 1" ng-show="myVideoId == video.videoId" my-video-manager="video" />
<my-video my-video-id="al1jd89" my-headline="Video Headline 2" ng-show="myVideoId == video.videoId" my-video-manager="video"/>
</ul>
</div>
Since ng-switch is really just a shortcut for ng-show anyways, it amounts to the same thing; the logic just got moved into the ng-show attribute instead.
Also, if you have an array of videos, checkout out ng-repeat; it will let you repeat your video tag multiple times automatically, instead of by hand.
<ul>
<my-video ng-repeat='aVideo in myVideoArray' my-video-id='aVideo.videoId' my-headline...(and so on)>
</ul>
Well your controller names don't match up. Try changing AppCtrl to SavingsVideoController.
You only need a very simple solution.
HTML
<div ng-controller="AppCtrl">
<div ng-cloak ng-show="view.show">
<!-- Use ng-show is more convenient -->
</div>
<div>
<ul>
<li>
<h3>Video Headline 1</h3>
<button type="button"
ng-click="view.show = true"
data-video-id="jR4lLJu_-wE">PLAY NOW 〉</button>
<!-- You don't need an extra directive to change view.show -->
</li>
<li>
<h3>Video Headline 2</h3>
<button type="button"
ng-click="view.show = true"
data-video-id="sd0f9as8df7">PLAY NOW 〉</button>
</li>
</ul>
</div>
</div>
JS
var thisViewModel = angular.module("savings-video", [])
.controller('SavingsVideoController', function($scope) {
$scope.video = {
show : false,
videoId : ""
};
};
// No need to create another directive
I am trying to come up with a way to display a load dialog while the items in ng-repeat are being rendered. The use case is as follows:
User clicks a toggle switch to display a list of items
A directive is shown that contains an ng-repeat of items
The list of items show up almost instantly on a PC. But on a mobile device it takes a few seconds for the list to show up. This can cause the user to tap the toggle switch multiple times resulting in the list being hidden and shown.
Here's my HTML mark-up:
<div jqm-theme="b">
<div style="" jqm-theme="a" jqm-textinput ng-model="projectFilter"
placeholder="Filter Project Areas...">
</div>
<div style="height:12px;"></div>
<ul jqm-listview style="padding-top: 12px;">
<project-display title="My Project Areas" filter="projectFilter" projects="myProjects"
select-project="selectProject" show="true">
</project-display>
<li jqm-li-entry jqm-theme="b" class="ui-icon-alt">
<div class="ui-grid-a">
<div class="ui-block-a">
<a class="projTitle">Toggle All Projects</a>
</div>
<div class="ui-block-b" style="text-align:right;">
<div jqm-flip mini="true" jqm-theme="d" ng-model="allSwitch.value"
on-label="On" on-value="1" off-label="Off" off-value="0"
default-value="0" ng-click="toggleAllProj()">
</div>
</div>
</div>
</li>
<project-display title="All Project Areas" filter="projectFilter" projects="projects"
select-project="selectProject" show="allSwitch.value">
</project-display>
</ul>
</div>
Here's the directive:
angular.module('myApp').directive('projectDisplay', ['$location', function($location) {
return {
restrict: 'E',
scope: {
title: '#',
filter: '=',
projects: '=',
selectProject: '=',
show: '='
},
templateUrl: 'template/directives/project-display.html'
};
}]);
Here's the directive's template:
<div ng-show="show">
<span style="margin-left:13px" jqm-li-divider>{{title}} ({{projects.length}})</span>
<ul jqm-listview style="padding-top: 12px;">
<li jqm-li-link jqm-theme="a" style="margin-left:13px" class="ui-icon-alt" ng-click="selectProject(project)"
ng-repeat="project in projects | filter: filter">
<a>{{project.title}}</a>
</li>
</ul>
</div>
I am using Angular JQM's $loadDialog which can be shown and hidden by explicitly calling the separate methods or it can also display until a promise is resolved.
Is there a way to monitor when all items within an ng-repeat have been rendered? I appreciate any help on this matter.
Thanks