Here is the way to notify user that there are fields with non-valid values.

markFieldsAsTouched function FormGroup or FormArray as an argument.

function markFieldsAsTouched(form: AbstractControl): void {
  form.markAsTouched({ onlySelf: true });
  if (form instanceof FormArray || form instanceof FormGroup) {


import { Component } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, FormArray, Validators } from '@angular/forms';

  selector: 'my-app',
  template: `
    <div for="fieldOne"> fieldOne </div>
        <input formControlName="fieldOne" id="fieldOne"/>
    <div *ngIf="formGroup.get('fieldOne').touched && formGroup.get('fieldOne').invalid">
        <div *ngIf="formGroup.get('fieldOne').errors['required']"> Need to fill </div>
        <input formControlName="fieldTwo" id="fieldTwo"/>
    <div *ngIf="formGroup.get('fieldTwo').touched && formGroup.get('fieldTwo').invalid">
        <div *ngIf="formGroup.get('fieldTwo').errors['required']"> Need to fill </div>
      <button (click)="onSubmit()">Click me to highlight the field</button>
    </div> `
export class AppComponent {

  formGroup: FormGroup = new FormGroup({
    'fieldOne': new FormControl(null, Validators.required),
    'fieldTwo': new FormControl(null, Validators.required)

  onSubmit(): void {
    if (this.formGroup.valid) {
      // Work on your validated data
    } else {

  markFieldsAsTouched(form: AbstractControl): void {
    form.markAsTouched({onlySelf: true});
    if (form instanceof FormArray || form instanceof FormGroup) {

On ‘Submit’ trigger function ‘markFieldsAsTouched’ with your reactive form passed as arg.
It will mark form controls as ‘touch’ and in case of non-validity control will get error property.

Based on control error property you can add validation notification via, for example, *ngIf directive in template


It’s very useful to check out more general method Accessing all nested form controls by Thekiba to work with controls.