Angular 8 - FormControl Pattern Validation - validation

Question

I am trying to validate the user field with letters only.
Following the documentation at https://angular.io/api/forms/Validators#pattern
I am not getting the expected result.
Validator.required works.
Validator.minLength works.
But the pattern does not.
I need the user field to have only letters.
Already looked for similar issues here in the forum and tried some implementations but it is not working.
I also tried to add direct into the html tag [pattern]='onlyLetters' and also didn't work.
html
<form (ngSubmit)="onSubmitNewUser()" [formGroup]="userFormGroup" >
<mat-card>
<mat-card-title fxLayoutAlign="center">{{'USERS.NEW'|translate}}</mat-card-title>
<mat-card-content fxLayoutAlign="left" fxLayout="column">
<mat-form-field fxFlex="100%">
<mat-label>{{'USERS.GROUP'|translate}}</mat-label>
<mat-select formControlName="group" >
<mat-option *ngFor="let group of groups" value="{{ group.users_group_id }}">{{ group.users_group_name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="100%">
<input
[pattern]="pattern"
placeholder="{{'USERS.USERNAME'|translate}}"
type="text"
formControlName="username"
matInput />
<mat-error *ngIf="formControlUsername.hasError('required')" >
{{'VALIDATION.REQUIRED'|translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="250px" hintLabel="{{'VALIDATION.PASSWORD_HINT'|translate}}">
<input
type="password"
placeholder="{{'USERS.PASSWORD'|translate}}"
matInput
formControlName="password"/>
<mat-hint align="end"> {{ formControlPassword.value?.length }} / 6 </mat-hint>
<mat-error>{{'VALIDATION.MIN_LENGTH'|translate}}</mat-error>
</mat-form-field>
</mat-card-content>
<mat-card-actions fxLayoutAlign="left">
<button
type="submit"
color="primary"
mat-raised-button
[disabled]="userFormGroup.invalid">{{'SAVE'|translate}}</button>
</mat-card-actions>
</mat-card>
</form>
TS file
import { Component, OnInit} from '#angular/core';
import { FormControl, FormGroup, Validators} from '#angular/forms';
import { GroupsModel} from '../_models/groups.model';
import { UsersService} from '../_services/users.service';
#Component({
selector: 'app-users-add',
templateUrl: './users-add.component.html',
styleUrls: ['./users-add.component.scss']
})
export class UsersAddComponent implements OnInit {
pattern = "[a-zA-Z]*";
formControlGroup = new FormControl('',{
validators: [Validators.required]
});
formControlUsername = new FormControl('',{
validators: [
Validators.required,
Validators.pattern(this.pattern)
]
});
formControlPassword = new FormControl('',{
validators: [
Validators.required,
Validators.minLength(6)
]
});
userFormGroup: FormGroup;
groups: GroupsModel[] = [];
constructor(private usersService: UsersService) { }
ngOnInit() {
this.userFormGroup = new FormGroup({
group: this.formControlGroup,
username: this.formControlUsername,
password: this.formControlPassword
});
this.usersService.getGroups().subscribe( data => {
this.groups = data
});
}
onSubmitNewUser() {
console.log(this.userFormGroup.value);
}
}