Angular dynamically set ng-messages to name attribute

javascript angularjs validation ng-messages
CSharpBeginner picture CSharpBeginner · Jul 16, 2015 · Viewed 11.3k times · Source

I dynamically create inputs and want also validate every one of them but cant set correctly the ng-messages attribute to the field name property which is dynamically generated. 

<input ng-model="sub.name" name="subName{{$index}}" class="form-control" placeholder="name" required maxlength="20" />
         <div class="field-error" ng-messages="form.subName{{$index}}.$error" ng-show="form.Name.$touched" role="alert">
               <div ng-message="required">Name is required.</div>
          </div>

I got problem with second line where i set the ng-messages dynamically to ng-messages. How can I do this?

Answer

Helori picture Helori · Jul 21, 2015

Accessing the properties of your form object can also be done using brackets, which should solve your problem :

<input ng-model="sub.name" name="subName{{$index}}" class="form-control" placeholder="name" required maxlength="20" />
<div class="field-error" ng-messages="form['subName' + $index].$error" ng-show="form.Name.$touched" role="alert">
    <div ng-message="required">Name is required.</div>
</div>

Related questions

Angular ng-messages: how to check password confirmation?

THE SITUATION: I am using ng-messages directive for instant validation in my angular app. Everything is working fine except one thing: i need to validate the field 'password confirmation' and don't know how to do. THE CODE: <form name="…

Read More
Validate custom directive using ngMessages

I writing a web app in angularjs and using angular material (not sure if that is relevant to the question) and ngMessages to provide feedback for invalid inputs to the user. Usually, for validation of directives provided, I can validate …

Read More
show validation error messages on submit in angularjs

I have a form which need to show validation error messages if clicked submit. Here is a working plunker <form name="frmRegister" ng-submit="register();" novalidate> <div> <input placeholder="First Name" name="first_name" type="text" …

Read More