JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="outerForm" ng-init="submitted=false" novalidate="">
        <div ng-repeat="item in items">
            <data-ng-form name="innerForm">
                <input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required/>
                <span class="error" ng-show="$parent.submitted&& innerForm.fieldU.$error.required">
                        Required!
                  </span>
                <input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required/>
                <span class="error" ng-show="$parent.submitted && innerForm.userName.$error.required">
                     Required!
                  </span>
            </data-ng-form>
        </div>
        <input type="submit" ng-click="submitted=true;save(items)" ng-disabled="submitted && outerForm.$invalid" />
        <button ng-click="add()">New Field</button>
    </form>
    Items: {{items}}
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {

    $scope.save = function (question) {

        console.log(question)

    }
    $scope.items = [];

    $scope.add = function () {
        if ($scope.items.length >= 10) {
            toastr.warning("Only 10 fields are allowed");
        } else {
            $scope.items.push({
                //inlineChecked: false,
                question: "",
                questionPlaceholder: "foo",
                text: ""
            });

        }
    };
});