Используйте форму, представленную после проверки

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>