JSFiddle - React, Tailwind, and code Playground

by Gabriel Stabel

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl" class="box">

		<ng-form name="form">
            <input type="text" ng-model="static" name="static"/>

			<div ng-repeat="df in dynamicForms" class="box">
				<ng-form name="form{{df.id}}">
                    <input type="text" ng-model="df.sub" name="sub"/>
					<div>Dirty: <span ng-bind="form{{df.id}}.$dirty"></span></div>
				</ng-form>
			</div>

			<div><button ng-click="consoleLog()">Console Log</button></div>
			<div>Dirty: <span ng-bind="form.$dirty"></span></div>

		</ng-form>		
	</div>
</div>

CSS

.box {margin: 5px; padding: 5px; border: 1px dashed #666;}

JavaScript

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
	
		$scope.static = "main form";

		$scope.dynamicForms = [
			{ id: 1, sub: "form 1"},
			{ id: 2, sub: "form 2"},
			{ id: 3, sub: "form 3"},
		];

		$scope.consoleLog = function() {
			console.log($scope.form.static.$modelValue);			
			for (var i = 0; i < $scope.dynamicForms.length; i++)
			{
				var formName = "form" + $scope.dynamicForms[i].id;
				console.log($scope.form[formName].sub.$modelValue);
			}
		};
	}
);

// Workaround for bug #1404
// https://github.com/angular/angular.js/issues/1404
// Source: http://jsfiddle.net/gstabel/Tzp7a/
// Credits: http://plnkr.co/edit/hSMzWC?p=preview
app.config(['$provide', function($provide) {
    $provide.decorator('ngFormDirective', ['$delegate', function($delegate) {
        var ngForm = $delegate[0], controller = ngForm.controller;
        ngForm.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
            var $interpolate = $injector.get('$interpolate');
            attrs.$set('name', $interpolate(attrs.name || '')(scope));
            $injector.invoke(controller, this, {
                '$scope': scope,
                '$element': element,
                '$attrs': attrs
            });
        }];
        return $delegate;
    }]);
		$provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
        var ngModel = $delegate[0], controller = ngModel.controller;
        ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
            var $interpolate = $injector.get('$interpolate');
            attrs.$set('name', $interpolate(attrs.name || '')(scope));
            $injector.invoke(controller, this, {
                '$scope': scope,
                '$element': element,
                '$attrs': attrs
            });
        }];
        return $delegate;
    }]);
    $provide.decorator('formDirective',...