JSFiddle - React, Tailwind, and code Playground

by anpsince83

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<div id="container" ng-controller="ValidationCtrl">
    <form name="validationForm">
        <div>
            <label>Make Choice</label>
            <select ng-model="choice" ng-options="choice.label for choice in textChoices"></select>
        </div>

        <div ng-repeat="rules in choice.validation track by $index">
            <ng-form name="textForm">
                <label>Enter Text</label>
                <input type="text"
                       name="text"
                       ng-model="text[$index]"

                       ng-minlength="{{ rules.minLength }}">

                Min {{ rules.minLength }} Chars

                <div class="error" ng-show="textForm.text.$dirty && textForm.text.$invalid">
                    <small ng-show="textForm.text.$error.minlength">Please enter min amount of characters.</small>
                </div>
            </ng-form>
        </div>
    </form>
</div>

JavaScript

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

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
    $scope.textChoices = [
        { label: "1 line", validation: [ { minLength: 3 } ] },
        { label: "2 lines", validation: [ { minLength: 1 }, { minLength: 3 } ] },
        { label: "3 lines", validation: [ { minLength: 2 }, { minLength: 2 }, { minLength: 3 } ] }
    ];
    $scope.choice = $scope.textChoices[0];
    $scope.text = [];
}]);