如何在AngularJS中访问不按其名称命名的表单对象？

Question

I'm using the code below to show the field errors. Now I want to reuse the code creating a partial, but I can't find a way to do that without access the form by its name.

There's a way to access the form object without hardcode its name? Or pass that to the partial?

Code where the form is registerForm :

<div class="error_panel">
    <div ng-show="registerForm.$submitted || registerForm.user_name.$touched">
      <span ng-show="registerForm.user_name.$error.required">
          Por favor, preencha este campo.
      </span>
    </div> 
</div>

Thanks a lot!

Answer 1

You can use a proxy name for your form that can then be used inside of the partial. For eg something like this.

errors.html
------------
<div class="error_panel">
<div ng-show="thisForm.$submitted || thisForm.user_name.$touched">
  <span ng-show="thisForm.user_name.$error.required">
      Por favor, preencha este campo.
  </span>
</div> 

main.html
---------
<form name="registerForm">
     .....
     <ng-include src="'errors.html'" onload="thisForm=registerForm" />
</form>

This way, the onload attribute on ng-include will get fired when its included and set the current form into the scope, which you can use in your partial.

Please note that you have field names that are still hardcoded, but the same logic can be applied there as well.