JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<body ng-app="myapp">

<div class="container" ng-app="dynamicFormApp" ng-controller="mainController">
  
  <div class="page-header">
      <h3 class="text-success">Dynamic Way</h3>
      <p>Each field acts as its own input and validates by itself... like it should.</p>
    </div>
    
    <form name="userFormTwo" novalidate>
    
        <div class="form-group" ng-repeat="user in formDataTwo.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }">
          
        <ng-form name="userFieldForm">
            <label>{{ user.name }}'s Email</label>
            <input type="email" class="form-control" name="email" ng-model="user.email" required>
            <p class="help-block" ng-show="userFieldForm.email.$dirty&&userFieldForm.email.$invalid">Valid Email Required</p>
        </ng-form>
          
        </div>
        
    </form>
</div>
</body>

JavaScript

angular.module('myapp', [])

.controller('mainController', function($scope) {
  var users = [
      { 
        name: 'Chris',
        email: ''
      },
      {
        name: 'Holly',
        email: ''
      }
  ];  
  
  $scope.formDataTwo = {};
  $scope.formDataTwo.users = users;
  
});