angular material mat-error in http request code example

Example: angular material mat-error on http request

// first define our formcontrol object
control = new FormControl('', [Validators.required])

//http method:
submit() {
  //call api
  // assume you got an error (Unauthorized, BadRequest, ...)
  //this set control to errored status and thus,
  //mark formcontrol/formgroup as invalid
  this.control.setErrors({error_key: true})
}

// in your html code :
<mat-form-field>
  <mat-label>Control</mat-label>
  <input type="text" formControlName="control" matInput />
  <mat-error *ngIf="control.hasError('required')">
  	Control cannot be empty
  </mat-error>
  <mat-error *ngIf="control.hasError('error_key')">
  	My custom error message
  </mat-error>
</mat-form-field>