Why my Angular Form shows error validations only after submit?

Question

I am using ReactiveForms module to build up a form for adding a new member. I have validators in my component.ts but the template errors are showing up only when clicking the submit button. I want to achieve to show or not error messages every keystroke or when each input is touched. I have followed tutorials but can't figure out what is wrong.

My form template:

<form autocomplete="off" [formGroup]="addMemberForm" (ngSubmit)="onSubmit()" class="ml-5">
  <span class="form-text text-danger" [ngClass]="displayIfValueisValid('name')">You have entered an incorrect name.</span>
  <app-form-input-text [label] = "'Name'" [type]="'text'" [placeholder]="'Ex: Adam'" [isRequired]="true" formControlName=name ngDefaultControl></app-form-input-text>
</form>

My form component:

export class MemberAddComponent implements OnInit {

  regexValidateSpecialCharacters: string =
    "^[a-zA-ZÀ-ÿ\u00f1\u00d1]+(\\s*[a-zA-ZÀ-ÿ\u00f1\u00d1]*)*[a-zA-ZÀ-ÿ\u00f1\u00d1]+$";
  regexValidateEmail: string = "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$";
  regexValidateUsername: string = "^[a-zA-Z0-9.]*$";

  addMemberForm: FormGroup = this.formBuilder.group({
    name: [
      "",
      [
        Validators.required,
        Validators.pattern(this.regexValidateSpecialCharacters),
        Validators.maxLength(255),
      ],
    ],
    surname: [
      "",
      [
        Validators.required,
        Validators.pattern(this.regexValidateSpecialCharacters),
        Validators.maxLength(255),
      ],
    ],
    role: [
      "",
      [
        Validators.required,
        Validators.pattern(this.regexValidateSpecialCharacters),
        Validators.maxLength(255),
      ],
    ],
    email: [
      "",
      [
        Validators.required,
        Validators.pattern(this.regexValidateEmail),
        Validators.maxLength(255),
      ],
    ],
    username: [
      "",
      [
        Validators.required,
        Validators.pattern(this.regexValidateUsername),
        Validators.maxLength(255),
      ],
    ],
    comments: [
      "",
      [
        Validators.pattern(this.regexValidateSpecialCharacters),
        Validators.maxLength(255),
      ],
    ],
  });

  constructor(
    private formBuilder: FormBuilder
  ) {}

  ngOnInit(): void {
    this.addMemberForm.reset({});
  }

  displayIfValueisValid(value: string): string {
    if (
      this.addMemberForm.get(value)?.invalid &&
      this.addMemberForm.get(value)?.touched
    )
      return "d-block";
    return "d-none";
  }


  onSubmit() {
    if (this.addMemberForm.invalid) this.addMemberForm.markAllAsTouched();
    else {
    }
  }
}

My generic input template:

    <div class="form-group">
    <label class="font-weight-bold">{{ label }}<input type ="{{ type }}" class="form-control" id="input" placeholder="{{placeholder}}" required="{{ isRequired }}"></label>

</div>

Answer 1

I think the issue is that you're using a method and classes to define whether the error text should appear with [ngClass]. The method is only getting re-called when the user clicks: it has no way of knowing that the underlying value has changed.

I suggest you use the statusChanges Observable of the FormControl you want to watch and wire it to *ngIf:

this.showError$ = formCtrl.statusChanges.pipe(
  map(status => status === 'INVALID')
)

This Observable will emit true when the control is invalid and false otherwise. You can then use it in *ngIf to show the error text:

<span class="form-text text-danger" *ngIf="showError$ | async">You have entered an incorrect name.</span>