JSFiddle - React, Tailwind, and code Playground

by sokolov_stas

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<div ng-app>
    <div ng-controller="TestController">
        <ng:form name="form">
            <input type="text" required name="myVar1" ng-model="myVar1">
            <form name="nestForm">
                <input type="text" name="myVar2" required ng-model="myVar2">
            </form>
        </ng:form>
        
        <button ng-click="onAddForm()">+</button>
        <button ng-click="onRemoveForm()">-</button>
        <div>Form JSON: {{form | json}}</div>
        <div>Form valid: {{form.$valid}}</div>
        <div>Form error: {{form.$error}}</div>
    </div>
</div>

JavaScript

function TestController($scope, $compile) {
    $scope.myVar1 = 1;
    $scope.myVar2 = 2;
    $scope.onAddForm = function(){
        var element = angular.element('<form name="nestFormDynamic"><input type="text" required ng-model="myVar3" name="myVar3"></form>');
        $('[name="form"]').append(element);
        $compile($('[name="form"]').contents())($scope)
    }
    $scope.onRemoveForm = function(){      
        $('[name="nestFormDynamic"]').remove();
        $compile($('[name="form"]').contents())($scope);

    }
}