如何用标签和gangularjs以模态验证形式

Question

我具有带有角和uib-tabset的模态形式。

我只有一个模态的页脚。每个选项卡都有一个形式（A B和C）。

当我尝试启用/禁用页脚上的保存按钮时，我可能会不会表格。他们不确定。

因此，在"保存"按钮中（请参阅Plunker） - forma。$无效。我认为这是一个范围问题。

我不希望将全局形式放在所有选项卡上。

是否有一些解决方法可以解决？

标记：

<div class="modal-content">
    <div class="modal-header bg-primary">
      <button type="button" class="close" ng-click="doCancel()" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="ativarSmsLabel">
        Test
      </h4>
    </div>
    <div class="modal-body">
        <uib-tabset active="activePill" vertical="false" type="pills">
          <uib-tab index="0" heading="Agendamento">     
                            <form name="formA" novalidate>
                                <input type="text" ng-model="testA"
                             </form>
                        </div>
                    </div>
                </div>
          </uib-tab>
          <uib-tab index="1" heading="Ficha">       
              <form name="formB" novalidate>
                                <input type="text" ng-model="testB"
              </form>
          </uib-tab>
          <uib-tab index="2" heading="Histórico">
                <form name="formC" novalidate>
                   <input type="text" ng-model="testC"
                </form>
          </uib-tab>
        </uib-tabset>
    </div>
     <div class="modal-footer">
               <div class="btn-toolbar">
                   <button type="button" class="btn btn-sm btn-primary pull-right" ng-click="saveItem()"
                    aria-hidden="true" ng-disabled="formA.$invalid">
                    Save
                  </button>
                  <button type="button" class="btn btn-sm pull-right" ng-click="doCancel()"
                    aria-hidden="true">
                    Close
                  </button>
               </div>
      </div>
</div>

Answer 1

核心AngularJS指令，例如ng-repeat，ng-switch，ng-view，CC_3，ng-include和ng-if都创建了新的儿童范围。结果，表单控制器将其API附加到该子范围。在这种情况下，uib-tabset指令将转移到子范围。

要在父范围上访问表单控件，请使用NG形式指令创建嵌套表单：

<form name="top">
    <div ng-if="AngularExpression">
       <ng-form name="formA" novalidate>
           <input ng-model="userData.testA" required />
       </ng-form>
   </div>
</form>
<div ng-show="top.formA.$error.$required">
   ERROR: input required
</div>

也必须遵循始终在ng模型中始终具有dot的"最佳实践"。

有关更多信息，请参阅Angularjs中范围原型/原型继承的细微差别？