title: Angular 8 - FormControl Pattern Validation
body: <p>I am trying to validate the user field with letters only.
  Following the documentation at <code>https://angular.io/api/forms/Validators#pattern</code>
  I am not getting the expected result.</p>
  
  <p>Validator.required works.
  Validator.minLength works.
  But the pattern does not.</p>
  
  <p>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.</p>
  
  <p>I also tried to add direct into the html tag <code>[pattern]='onlyLetters'</code> and also didn't work.</p>
  
  <p>html</p>
  
  <pre><code>&lt;form (ngSubmit)="onSubmitNewUser()" [formGroup]="userFormGroup" &gt;
      &lt;mat-card&gt;
  
          &lt;mat-card-title fxLayoutAlign="center"&gt;{{'USERS.NEW'|translate}}&lt;/mat-card-title&gt;
          &lt;mat-card-content fxLayoutAlign="left" fxLayout="column"&gt;
  
              &lt;mat-form-field fxFlex="100%"&gt;
                  &lt;mat-label&gt;{{'USERS.GROUP'|translate}}&lt;/mat-label&gt;
                  &lt;mat-select  formControlName="group" &gt;
                      &lt;mat-option *ngFor="let group of groups" value="{{ group.users_group_id }}"&gt;{{ group.users_group_name }}&lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
  
              &lt;mat-form-field fxFlex="100%"&gt;
                  &lt;input
                      [pattern]="pattern"
                      placeholder="{{'USERS.USERNAME'|translate}}"
                      type="text"
                      formControlName="username"
                      matInput /&gt;
                  &lt;mat-error *ngIf="formControlUsername.hasError('required')" &gt;
                      {{'VALIDATION.REQUIRED'|translate}}
                  &lt;/mat-error&gt;
              &lt;/mat-form-field&gt;
  
              &lt;mat-form-field fxFlex="250px" hintLabel="{{'VALIDATION.PASSWORD_HINT'|translate}}"&gt;
                  &lt;input
                      type="password"
                      placeholder="{{'USERS.PASSWORD'|translate}}"
                      matInput
                      formControlName="password"/&gt;
                  &lt;mat-hint align="end"&gt; {{ formControlPassword.value?.length }}  / 6 &lt;/mat-hint&gt;
                  &lt;mat-error&gt;{{'VALIDATION.MIN_LENGTH'|translate}}&lt;/mat-error&gt;
              &lt;/mat-form-field&gt;
  
          &lt;/mat-card-content&gt;
  
          &lt;mat-card-actions fxLayoutAlign="left"&gt;
              &lt;button
                  type="submit"
                  color="primary"
                  mat-raised-button
                  [disabled]="userFormGroup.invalid"&gt;{{'SAVE'|translate}}&lt;/button&gt;
          &lt;/mat-card-actions&gt;
      &lt;/mat-card&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>TS file</p>
  
  <pre><code>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 =&gt; {
          this.groups = data
      });
  }
  
  onSubmitNewUser() {
      console.log(this.userFormGroup.value);
  }
  </code></pre>
  
  <p>}</p>