JSFiddle - React, Tailwind, and code Playground

by Dave Alperovich

HTML

<form name="myform" ng-app="plunker" ng-controller="MainCtrl">
    <input type="text" data-ng-required="isRequired" data-ng-minlength="setMinLength()" data-ng-model="mydata" name="myfield" /> <span style="color: red;" ng-show="!myform.$valid">*</span>
{{mydata}}</br>
    <br>
    <input type="number" data-ng-model="minLength" name="minLength" />
    <button data-ng-click="toggleConstraints()">Toggle Required</button>
    </br> <tt>myform.$valid = {{myform.$valid}}</tt>

    </br> <tt>myform.myfield.$valid = {{myform.myfield.$valid}}</tt>

</form>

JavaScript

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

app.controller('MainCtrl', function ($scope, $timeout) {
    $scope.isRequired = false;
    $scope.minlength = 0;
    $scope.mydata = "";

    $scope.toggleConstraints = function () {
        if ($scope.isRequired == false) {
            $scope.isRequired = true;
        } else {
            $scope.isRequired = false
        }

        //alert ($scope.isRequired);
    };

    $scope.setMinLength = function () {
        return $scope.minLength + 0;

    };
})