AngularJS validation show validation msg on submit [duplicate] - angularjs

Question

This question already has answers here:
show validation error messages on submit in angularjs
(13 answers)
Closed 7 years ago.
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

Answer 1

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

Answer 2

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.