Как применить валидацию в угловых 7 реактивных формах при подаче?

Question

Код TS:

onSubmit(){
 if(this.Registration.invalid){
   return;
  }
alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

}

Код HTML:

<form class="admin-form" [formGroup]="Registration" (ngSubmit)="onSubmit()" id="Registration">
    <mat-form-field appearance="outline">
        <mat-label>username</mat-label>
        <input matInput class="matInput" placeholder="username" type="text" formControlName="username">
    <mat-icon matSuffix>person</mat-icon>
      <mat-error *ngIf="Registration.controls['username'].invalid && (Registration.controls['username'].dirty ||Registration.controls['username'].touched)">
        <div *ngIf="Registration.controls['username'].errors.required">
          username is required.
        </div>
        <div *ngIf="Registration.controls['username'].errors.pattern">
          username must be characters and special characters.
        </div>
       </mat-error>
  </mat-form-field>
  <button mat-icon-button type="submit" value="submit">
    <i class="material-icons">send</i>
  </button>
</form>

Проверка угловых 7 реактивных форм на кнопке отправки. Я хочу, если есть какие-либо ошибки или поле ввода пустое, а затемФорма не должна быть успешно отправлена.

Answer 1

Удалить !, потому что он возвращает true, когда форма в Invalid, т.е. имеет ошибки, и возвращает false, когда форма действительна, например:

if (this.Registration.invalid) {
   return;
}

alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

Но для проверки формы лучше использовать form.valid, объясните here

Таким образом, изменение с valid - это использование !:

if (!this.Registration.valid) {
   return;
}

alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));

Другой способ и рекомендуется:

Вы также можете отключить саму кнопку, если форма недействительна, поэтому, пока форма не станет действительной, кнопка отправки будет disabled, например:

[disabled]="!Registration.valid" OR [disabled]="Registration.invalid"

с кнопкой:

<button mat-icon-button type="submit" [disabled]="!Registration.valid" value="submit">
  <i class="material-icons">send</i>
</button>

Stackblitz_Example