Validate input, using formbuilder, with Pattern at angular 9

Question

I want to display the error message when the user changes or makes the input active using Pattern [ X20-xff]{5,50}$

But when I type characters that do not answer the field, it only turns red and the error message does not appear.

<form [formGroup]="ChannelCreateForm" (ngSubmit)="CreateChannel()">
  <mat-form-field class="input-full-width" appearance="standard">
    <mat-label>{{'channel.NewChannelPage.name' | transloco}}</mat-label>
    <input matInput type="text" formControlName="ChannelTitle"> 
    <mat-hint align="start" *ngIf="ChannelTitle.errors?.pattern && (ChannelTitle.dirty || ChannelTitle.touched)" class="text-danger">inválido</mat-hint>
  <mat-hint align="end">{{titleInput.value.length}} / 50</mat-hint>
  </mat-form-field>
    ....
</form>


Pattern50Char = "^[\x20-\xFF]{5,50}$";

  ChannelCreateForm: FormGroup;

  constructor(
    public _FormBuilder: FormBuilder,
    public _MatSnackBar: MatSnackBar
  ) { 
    this.ChannelCreateForm = this._FormBuilder.group({
      ChannelTitle: ['', [Validators.pattern(this.Pattern50Char), Validators.maxLength(50)]]
    });
  }

  get titleInput() {
    return this.ChannelCreateForm.get('ChannelTitle');
  }

Answer 1

I would try much of that validation on component and did not see reference in the template (your #channelTitle). First changing us Validators of FormBuilder Pattern and maxlength, and exposing the title reference via get

myPattern = "^[\x20-\xFF]{5,50}$";

form: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    channelTitle: ["", [Validators.pattern(this.myPattern), Validators.maxLength(50)]]
  });
}

get titleInput() {
  return this.form.get('channelTitle');
}

In HTML it would look like this, remove #channelTitle and use the get maid, the titleInput:

<form [formGroup]="form" (ngSubmit)="CreateChannel()">
   <mat-form-field class="input-full-width" appearance="standard">
   <mat-label>{{'channel.NewChannelPage.name' | transloco}}</mat-label>
   <input matInput type="text" formControlName="channelTitle"> 
   <mat-hint align="start" *ngIf="titleInput.errors?.pattern && (titleInput.dirty || titleInput.touched)">inválido</mat-hint>
   <mat-hint align="end">{{titleInput.value.length}} / 50</mat-hint>
 </mat-form-field>
</form>