Блог

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 amp;amp; (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>
  

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

Удалить, ! потому что он возвращает true , когда форма недействительна, т. е. содержит ошибки, и возвращает, 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