AngularJS validation show validation msg on submit

Question

I am dynamically adding fields and want "required" validation on each field I add.

Problem is angular validates these fields before i submit.

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

here is fiddle

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

I want required msg only to show when user did not add anything to text box and after he/she clicked submit

This should help: http://stackoverflow.com/questions/18798375/show-validation-error-messages-on-submit-in-angularjs — Nika Tsogiaidze, Mar 19 '15 at 13:35
First of all, use the novalidate attribute on your form to prevent default browser validation behavior. — Himmet Avsar, Mar 19 '15 at 13:51

score 2 · Accepted Answer · answered Mar 19 '15 at 14:12

I'd love to maintain one scope variable which will keep a track that form is submitted or not

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

lvarayut · Answer 2 · 2015-03-19T13:52:16.520

You can create a $scope.isSubmit variable to detect whether the form has submitted or not:

Controller:

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: ""
            });

        }
    };
});

View:

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

So, I deleted the ng-disable in the button in order to make the submit button clickable even though the form isn't correct. Moreover, you should add novalidate into the form tag to disable the default form validation from HTML5.

Here is the full source code on JsFiddle.

AngularJS validation show validation msg on submit

2 Answers2