AngularJS validation show validation msg on submit [duplicate]

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

First of all, use the novalidate attribute on your form to prevent default browser validation behavior. — Himmet Avsar
– Himmet Avsar, Commented Mar 19, 2015 at 13:51

Pankaj Parkar · Accepted Answer · 2015-03-19 14:12:33Z

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 · Accepted Answer · 2015-03-19 13:52:16Z

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.

Collectives™ on Stack Overflow

AngularJS validation show validation msg on submit [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related