AngularJS验证在提交时显示验证消息

我正在动态添加字段，并希望对我添加的每个字段进行“必需”验证

问题是，在我提交之前，angular会验证这些字段

    <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>

必修的！
必修的！
新领域

这是小提琴

---

我只想在用户未向文本框添加任何内容时显示required msg，在他/她单击submit后，您可以创建一个

$scope.isSubmit

变量来检测表单是否已提交：

控制器：

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

    $scope.save = function (question) {
        $scope.isSubmit = true; // Will be true if the form has submitted
        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: ""
            });

        }
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="outerForm" 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="innerForm.fieldU.$error.required && isSubmit">
                                        Required!
                                    </span>

                <input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required> <span class="error" ng-show="innerForm.userName.$error.required && isSubmit">
                                        Required!
                                    </span>

            </data-ng-form>
        </div>
        <input type="submit" ng-click="save(items)" />
        <button ng-click="add()">New Field</button>
    </form>Items: {{items}}</div>

查看：

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

    $scope.save = function (question) {
        $scope.isSubmit = true; // Will be true if the form has submitted
        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: ""
            });

        }
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="outerForm" 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="innerForm.fieldU.$error.required && isSubmit">
                                        Required!
                                    </span>

                <input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required> <span class="error" ng-show="innerForm.userName.$error.required && isSubmit">
                                        Required!
                                    </span>

            </data-ng-form>
        </div>
        <input type="submit" ng-click="save(items)" />
        <button ng-click="add()">New Field</button>
    </form>Items: {{items}}</div>

必修的！
必修的！
新领域
项目：{{Items}

因此，我删除了按钮中的

ng disable

，以便即使表单不正确，也可以单击提交按钮。此外，您应该将

novalidate

添加到

form

标记中，以禁用HTML5中的默认表单验证

---

这是完整的源代码。

我想维护一个范围变量，它将跟踪表单是否提交

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>

必修的！
必修的！
新领域
项目：{{Items}

---

这应该有帮助：首先，在表单上使用novalidate属性来防止默认的浏览器验证行为。