Question

我有一个跨TabStrip控件中的多个标签的表单。但是，在验证表单时（例如f.valid），在评估验证时不会考虑所有控件。

例如，如果标签1上的输入字段标记为“必需”，并且当焦点位于选项卡＃3上时调用保存操作，则表单将显示为无效，因为所需字段不在视图中。如果焦点在标签＃1上，则所有都按预期工作。

我理解为什么会出现这种情况，但我想知道是否有任何建议的解决方法。

谢谢！

更新

我创建了一个显示基本问题的plunkr。它实际上与我描述的问题有点相反，但它显示了表单如何忽略除验证期间显示的选项卡上的字段：Plunkr Example

模板代码如下所示：

  <form #f="ngForm" (ngSubmit)="save(f)">
  <kendo-tabstrip>
    <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
      <ng-template kendoTabContent>
        <input type="text" name="controlOne" id="controlOne" [(ngModel)]="myModel.controlOne" required>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'New York City'">
      <ng-template kendoTabContent>
        <input type="text" name="controlTwo" id="controlTwo" [(ngModel)]="myModel.controlTwo">
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'Tallinn'">
      <ng-template kendoTabContent>
        <input type="text" name="controlThree" id="controlThree" [(ngModel)]="myModel.controlThree">
      </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>
  <button type="submit">Save changes</button>
</form>
<div>
  Valid when saving: {{ isValid }}
</div>

表单跨多个选项卡时的表单验证

0 个答案: