How to use $error.required with ng-repeat? - angularjs

Question

I have the following structure:
// JS
$scope.fields = [
{ text: 'Email', type: 'text', value: '' },
{ text: 'Password', type: 'password', value: '' }
]
// HTML
<div class="user">
<h2 class="header">Log in</h2>
<form name="login">
<input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" ng-repeat="field in fields" required />
<a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
</form>
</div>
How can I implement $error.required like shown here? http://plnkr.co/edit/VLOEfp?p=preview
I don't know where to place:
<div class="" ng-show="myform.routingNumber.$error.required">
<span class="help-block">Please enter routing number</span>
</div>
Maybe I have to re-structure that ng-repeat?

Answer 1

Try something like below. You are almost there. Just missed a basic point, all controls need name. Angular uses name for validations.
<div class="user">
<h2 class="header">Log in</h2>
<form name="login" novalidate="">
<div ng-repeat="field in fields" >
<input class="form-control" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" required name="{{field.name}}"/>
<div ng-show="login.{{field.name}}.$invalid">
<span class="help-block">Please enter</span>
</div>
</div>
<a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
</form>
</div>
Accordingly add name in your controller like below
$scope.fields = [
{ text: 'Email', type: 'text', value: '', name:'idname'},
{ text: 'Password', type: 'password', value: '', name:'password' }
]

Answer 2

In the example code, myform.routingNumber.$error.required myform is the name (html attribute) of your form and routingNumber is the name of your input element which should be validate.
So, like this,
<form name="myform">
<input name="routingNumber" ng-model="myRoute" />
<div class="" ng-show="myform.routingNumber.$error.required">
<span class="help-block">Please enter routing number</span>
</div>
</form>
Implement this on your code
So, in your actual code (with ng-repeat) you have to create a unique name for each input element.
<div class="user">
<h2 class="header">Log in</h2>
<form name="login">
<input class="form-control" name="{{field.text}}" type="{{ field.type }}" placeholder="{{ field.text }}" ng-model="field.value" ng-repeat-start="field in fields" required />
<div ng-repeat-end class="" ng-show="myform[field.text].$error.required">
<span class="help-block">Please enter {{field.text}}</span>
</div>
<a class="btn primary" href="javascript:;" ng-click="login()">Log in</a>
</form>
</div>

Answer 3

Even though #Naga Sandeep has answered the question. I'm just adding another condition to wrap the error message else the error message will be shown even if the user has not touched the form.
<div ng-app="myApp", ng-controller="myCtrl">
<form name="myForm" novalidate="">
<div ng-repeat="info in loginInfo">
<input type="{{info.type}}" ng-model="info.value" name="{{info.name}}" required novalidate>
<span ng-show="myForm.{{info.name}}.$touched || myForm.$submitted">
<span ng-show="myForm.{{info.name}}.$invalid">Please enter this field</span>
</span>
</div>
<button type="submit">
Login
</button>
</form>
</div>
angular.module("myApp", [])
.controller("myCtrl", myCtrl);
function myCtrl($scope){
$scope.loginInfo = [
{"name": "user_email", "value": "", "type":"email"},
{"name": "user_pass", "value": "", "type":"password"}
]
}