JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myCtrl">
   
                        <form name="outerForm">
                            <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="innerForm.fieldU.$error.required">
                                        Required!
                                    </span>
                                    <input  type="text" name="userName" placeholder="enter text..." ng-model="item.text" required>
                                    <span class="error" ng-show="innerForm.userName.$error.required">
                                        Required!
                                    </span>
                                </data-ng-form>
                            </div>
                            <input type="submit" ng-click="save(items)" ng-disabled="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: ""
            });

        }
    };
});