Angularjs 带幻灯片的角度形式验证

我是新来的角度，我有一个角度的形式，这是有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>

{{button1}
{{button2}}
{{button3}}
提交

---

我想为button2提供验证，如果您有一个表单需要在部分中进行验证，那么您应该使用子表单独立地验证每个部分。这可以通过ng表单实现。整个表单仍然必须包装在表单标签中，以允许提交等标准表单功能。下面是一个示例，您只需将每个ng表单放在自己的幻灯片上：

下一个

下一个

下一个

提交

---

这里有一个演示：

你在找类似的东西吗？谢谢它起作用了，我在所有幻灯片上都使用了一个常用按钮。。。但是为了完成工作，我根据你的代码修改了它

  <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>