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

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

0 голосов
/ 26 февраля 2019

Я хочу показать кнопку после отправки формы, однако, кажется, что проверка считается «Отправлено» и не 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 Clicking submit with no details - invalid but submitted

При прохождении проверки теперь отображается мой счетчик, но сразу (submitted true, valid верно)

After adding details, immediately spinning

1 Ответ

0 голосов
/ 26 февраля 2019

Ваша кнопка отправки будет отображаться, даже если форма недействительна, это нормально?Если нет, выполните: 

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