<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.0.0" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.11" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Disable children</h1>
<div ng-form="Form">
<ul>
<li>
<label>
<input type="radio" ng-model="selection" ng-value="'first'" name="selection" ng-required="'true'" />
First selection
</label>
<div disable-children="selection != 'first'">
Text here: <input type="text" ng-model="ekaText" name="ekaText" ng-pattern="/^[a-zA-Z]+$/" ng-required="'true'" ng-disabled="selection != 'first'" />
</div>
</li>
<li>
<label>
<input type="radio" ng-model="selection" ng-value="'second'" name="selection" ng-required="'true'" />
Second selection
</label>
<div disable-children="selection != 'second'">
Numbers: <input type="text" ng-model="tokaText" name="tokaText" ng-pattern="/^[0-9]+$/" ng-required="'true'" ng-disabled="selection != 'second'" />
</div>
</li>
</ul>
<h2>
Valid?
<span ng-show="Form.$valid" style="color:green">Yippii!</span>
<span ng-show="Form.$invalid" style="color:red">Not :(</span>
</h2>
</div>
</body>
</html>
// Code goes here
angular.module("app", [])
.directive('disableChildren', function() {
return {
require: '^form',
restrict: 'A',
link: function(scope, element, attrs,form) {
var control;
scope.$watch(function() {
return scope.$eval(attrs.disableChildren);
}, function(value) {
if (!control) {
control = form[element.find("input").attr("name")];
}
if (value === false) {
form.$addControl(control);
angular.forEach(control.$error, function(validity, validationToken) {
form.$setValidity(validationToken, !validity, control);
});
} else {
form.$removeControl(control);
}
});
}
}
})
/* Styles go here */
input.ng-dirty.ng-invalid {
border: 1px solid red;
}