angular - 验证后使用 form.submitted

Question

我想在提交表单后显示一个按钮，但是，它显示验证计为“已提交”，false如果验证失败，则不显示该值。

我的微调器是部分的

这导致显示我的微调器按钮，尽管没有发送任何内容，因为表单已提交，但无效。

我错过了什么吗？

 <button class="btn btn-lg btn-primary" [ngClass]="extraClasses" type="button" [disabled]="form.submitted" type="submit">
 {{text}}
 <span *ngIf="form.submitted" class="spinner-border spinner-border-sm" 
role="status" aria-hidden="true"></span>
</button>

单击没有详细信息的提交 - 验证失败，但仍将表单标记为submitted

通过验证现在显示我的微调器，但立即（submitted真，valid真）

Answer 1

即使表单无效，您的提交按钮也会显示，这是否正常？如果没有，请执行以下操作：

<button *ngIf="!form.submitted && !form.form.invalid" class="btn btn-lg btn-primary" [ngClass]="extraClasses"
  type="submit"> {{text}}</button>

编辑 ：

例如，您可能希望在组件 ts 文件中创建一个属性

private sumbitedWhenValid: boolean = false;

然后将其设置为在提交表单时表单是否有效。例如，如果您有一个 http 调用，则在 then() 中：

...then(() => {
    ...
    this.sumbitedWhenValid = !this.form.form.invalid;
});

然后将其用作微调器的条件：

<button *ngIf="sumbitedWhenValid" class="btn btn-lg btn-primary" [ngClass]="extraClasses" type="button" disabled>
  {{text}}
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</button>