ng-include same partial page twice in a page

Question

I have a partial html file say test.html, I want it to include in main page say main.html twice. I am doing ng-pattern on a text box in my partial file. Its not getting applied to my main page. Please find below example and help me.

test.html (Partial)

<form name="testform">
    <div>
        <input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
    </div>          
</form> 

main.html

<div>
    <div>
        <ng-include src="'test.html'"></ng-include>
        <button type="button" ng-show="testform.firstname.$error.pattern==false">
    </div>
    <div>
        <ng-include src="'test.html'"></ng-include>
        <button type="button" ng-show="testform.firstname.$error.pattern==false">
    </div>
</div>

button ng-show is working on only one div, not on both and that too If I use $parent for the partial form name.

Please help me to find what I am missing.

Answer 1

The problem is that you reference same DOM object. By specyfying name and validating it, you call twice, the same form and same property name. Angular does that once and think that it make done its work. I think it is not intended to do so, since you can create two forms. By adding extra class or changing at least form name and wrapping ng-include with form name, you can solve this problem:

test.html
    <div>
        <input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
    </div>     

main.html
<div>
    <div>
        <form name="testform1">
            <ng-include src="'test.html'"></ng-include>
        </form>
        <button type="button" ng-show="testform1.firstname.$error.pattern==false">
    </div>
    <div>
        <form name="testform2">
            <ng-include src="'test.html'"></ng-include>
        </form>
        <button type="button" ng-show="testform2.firstname.$error.pattern==false">
    </div>
</div>

Alternatively, you can just create two views with forms and ng-include them accordingly.