AngularJS验证在提交时显示验证消息[重复]

Question

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

问题是在我提交之前有角度验证这些字段。

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

这是小提琴

https://jsfiddle.net/Lbw6ow8k/7/

我只希望在用户没有向文本框中添加任何内容以及在他/她点击提交后显示所需的消息

Answer 1

我很想维护一个范围变量来跟踪表单是否提交

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>

Working Fiddle

Answer 2

你可以创建一个$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>

所以，我删除了按钮中的ng-disable，以便即使表单不正确也可以点击提交按钮。此外，您应该将novalidate 添加到form 标记中以禁用HTML5 的默认表单验证。

这是JsFiddle上的完整源代码。