How to add ng-messages to a dynamically created input in AngularJS with Material

Question

I have the following code that works except for the part where I try to add the ng-messages (they don't display). From my understanding, the ng-messages attaches to the name element. What am I doing wrong here?

<form ng-submit="submit(form)" name="form">
   <div ng-repeat="question in questions">
      <div ng-switch="question.type">
         <div ng-switch-when="text">
            <md-input-container class="md-block">
               <label>{{question.title}}</label>
               <input md-maxlength={{question.maxLength}}
                      required md-no-asterisk
                      name="questionStorage[question.id]"
                      ng-model="questionStorage[question.id]">
               <div ng-messages="form[questionStorage[question.id]].$error">
                   <div ng-message="required">This is required.</div>
...

I would not use an editable model value for that. I'd recommend something like setting the name of your <input> to question_$index and then using form.question_$index.$error for your ng-messages. — Lex
– Lex, Commented Dec 17, 2019 at 23:52

BrianDassow · Accepted Answer · 2019-12-18 14:54:37Z

0

With the help of Lex and Angular dynamically set ng-messages to name attribute I found the answer to be:

<form ng-submit="submit(form)" name="form">
   <div ng-repeat="question in questions">
      <div ng-switch="question.type">
         <div ng-switch-when="text">
            <md-input-container class="md-block">
               <label>{{question.title}}</label>
               <input md-maxlength={{question.maxLength}}
                      required md-no-asterisk
                      name="question{{$index}}"
                      ng-model="questionStorage[question.id]">
               <div ng-messages="form['question' + $index].$error">
                   <div ng-message="required">This is required.</div>
...

Thanks!

answered Dec 18, 2019 at 14:54

BrianDassow

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add ng-messages to a dynamically created input in AngularJS with Material

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related