Angularjs | ng-message not showing error message when load html from directive by using $compile

Question

I am creating dynamic from through ng-repeat from json.

my form.html

    <form    name="userForm" >
     <div ng-repeat="(key,box) in form.form_fields" >
    <accordion >
            <accordion-group heading="{{key}}"  is-open="true">
                <div ng-repeat="field in box">
                       <field-directive field="field">
                        </field-directive> 
               </div>       
            </accordion-group>
  </accordion>
            </div> 
    </form>

so basically i am loading each type of field (textbox/radio/dropdown/email etc) html trough loop via directive. I am loading these small HTML by using $compile and linker. Everything is working good even validation also. I am able to enable/disable submit button based on form validation except ng-message . if i not use directive like this

    <form name="userForm" >

 <div ng-repeat="(key,box) in form.form_fields" >
    <accordion >
            <accordion-group heading="{{key}}"  is-open="true">
                <div ng-repeat="field in box">

                        <div class="col-md-3 col-sm-6 col-xs-12" ng-if="field.field_type ==='textfield' ">
                                <md-input-container >
                                          <label>{{field.field_title}}</label>
                                          <input ng-model="field.field_value" name="{{field.field_id}}" type="text" 
                                            ng-required="true" md-maxlength="9" >


                                     <div ng-messages="userForm.{{field.field_id}}.$error">

                                        <p ng-message="maxlength">Your name is too long.</p>
                                        <p ng-message="required">Your name is required.</p>
                                    </div>
                                 </md-input-container>   
                        </div>   

                        <div class="col-md-3 col-sm-6 col-xs-12" ng-if="field.field_type ==='number' ">
                                <md-input-container >
                                          <label>{{field.field_title}}</label>
                                          <input ng-model="field.field_value" name="{{field.field_id}}" type="text" 
                                            ng-required="true" md-maxlength="9" >


                                     <div ng-messages="userForm.{{field.field_id}}.$error">

                                        <p ng-message="maxlength">Your name is too long.</p>
                                        <p ng-message="required">Your name is required.</p>
                                    </div>
                                 </md-input-container>
                        </div>



               </div>       
            </accordion-group>
  </accordion>
            </div> 
    </form>

everything is working fine including ng-message. I can see error message also. What is the issue with ng-message if i use directive . Please help.

score 0 · Answer 1 · answered Aug 02 '16 at 13:16

Probably late answer but you can do

var element1 = angular.element(your_html_fragment); ... logic to append element1 in somewhere

after this

$compile(element1)(scope) in your directive this should do it.

The sequence of angular.element and $compile is important.

Angularjs | ng-message not showing error message when load html from directive by using $compile

1 Answers1