JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<script id="repeatableForm.html" type="text/ng-template">
    <div ng-transclude></div>
</script>
<script id="repeatedForm.html" type="text/ng-template">
    <div>
        <form ng-repeat="form in repeatableForm.forms" ng-transclude>
        </form>
    </div>
</script>

<repeatable-form>
    <input type="button" value="add" ng-click="repeatableForm.add()"/>
        <form action="" repeatedform>
        First Name: <input name="fname" type="text" />
        <input type="button" value="remove" ng-click="repeatableForm.remove($index)" />
       </form>
</repeatable-form>

JavaScript

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

app.directive('repeatableForm', function () {
    return {
        templateUrl:'repeatableForm.html',
        restrict: 'E',
        transclude: true,
        controller: function () {
            var repeatableForm = this;
            repeatableForm.add = function () {
                repeatableForm.forms.push(repeatableForm.forms.length);
            };
            repeatableForm.remove = function (index) {
                repeatableForm.forms.splice(index, 1);                 
            };
            repeatableForm.forms = [0, 1, 2];
        },
        controllerAs: 'repeatableForm',
    };
});

app.directive('repeatedform', function () {
    return {
        templateUrl: 'repeatedForm.html',
        restrict: 'A',
        transclude: true,
        replace: true
    };
})