Question

我是棱角分明的新手，我有一个角形，有4张幻灯片。在我的表单中，我只是在验证第一张幻灯片通过验证步骤时以这种方式提供验证，它应该允许我移动到第二张幻灯片。

<button class="btn btn-primary" type="button" ng-hide="slide === 1" ng-click="back()">{{button1}}</button>
<button class="btn btn-warning" type="button" ng-hide="slide === 4" ng-disabled="myForm.$invalid" ng-click="ok()">{{button2}}</button>
<button class="btn btn-primary" type="button" ng-click="cancel()">{{button3}}</button>
<button class="btn btn-primary" type="button" ng-click="ac.theForm()" ng-disabled="myForm.$invalid">SUBMIT</button>

我想为button2提供验证

Answer 1

如果您有要在部分中进行验证的表单，则应使用子表单独立验证每个部分。这可以通过ng-form实现。整个表单仍然必须包装在表单标签中，以允许标准表单功能，如提交。这是一个例子，你只需要将每个ng-form放在它自己的幻灯片上：

  <ng-form name="slide1">
    <input type="text" ng-required="true" ng-model="val1">
    <button ng-disabled="slide1.$invalid">Next</button>
  </ng-form>
  <hr>
  <ng-form name="slide2">
    <input type="text" ng-required="true" ng-model="val2">
    <button ng-disabled="slide2.$invalid">Next</button>
  </ng-form>
  <hr>
  <ng-form name="slide3">
    <input type="text" ng-required="true" ng-model="val3">
    <button ng-disabled="slide3.$invalid">Next</button>
  </ng-form>
  <hr>
  <button ng-click="submitForm" ng-disabled="parentForm.$invalid">Submit</button>
</form>

这是一个演示：https://plnkr.co/edit/9Gvg2B3MOeiW2P1iEdQ4?p=preview

使用幻灯片进行角度表单验证

1 个答案: