Question

我正在动态添加字段并希望＆＃34; required＆＃34;对我添加的每个字段进行验证。

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

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

我想要的msg只显示用户何时没有向文本框中添加任何内容以及他/她点击提交后

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上的完整源代码。

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

2 个答案: