To avoid seeing the error message, certain conditions must be met:

• The value of the control is incorrect.
• The control is either in a dirty or touched state.

If you submit the form without interacting with the controls that require validation, the second condition will not be satisfied.

Therefore, before submitting the form, ensure that the form controls are marked as dirty or touched. You can achieve this by using the markAllAsTouched method from the root FormGroup to mark all controls as touched.

onSubmit() {
  this.dynamicFormGroup.markAllAsTouched();

  ...
}

In relation to the comment, the name control does not exist in the address FormArray. It is unclear why the validation error message template is placed there.

I am highlighting one of the controls within the address FormArray: "streetAddress". To access the streetAddress control, you must provide the index of the address FormArray as shown below:

addressFormGroup(i: number) {
  return this.AddressInfo.controls[`${i}`] as FormGroup;
}

<div
  *ngIf="addressFormGroup(i).get('streetAddress')?.invalid && (addressFormGroup(i).get('streetAddress')?.dirty || addressFormGroup(i).get('streetAddress')?.touched)"
>
  <small class="validation-error"
    >Please provide a Street Address.</small
  >
</div>

View the demonstration

Important Update: I neglected to mention in the .css that it should include 'input.ng-invalid.ng-touched'. If 'input' is not specified, it will not function correctly.

You have two options:

dynamicFormGroup.get('address.'+i+'.name')

or

AddressInfo.at(i).get('name')

To access the formControl inside the FormArray, I recommend another approach.

Angular marks an invalid FormControl with the classes ng-invalid ng-touched and ng-dirty, and ng-submit in a form. You can utilize this by using the subsequent sibling combinator ~

If you do something like this:

<form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()" >
  <div formArrayName="address">
    <div class="row" *ngFor="let fields of AddressInfo.controls;let i=index" [formGroupName]="i">
       <div class="form-group col-md-12">
          <div class="each_content">
              <input type="text" class="form-control height-reset" placeholder="Enter Name" name="name" formControlName="name" />
              <label class="labelTitle">Name <span class="validation-error">*</span></label>

              <div ><small class="validation-error">Please provide a title.</small></div>
          </div>
       </div>
</div>
</div>
  <button>submit</button>
</form>  

NOTE: I prefer using the loop in a ng-container inside a div FormArray

For the onSubmit function:

onSubmit(){
   if (!this.dynamicFromGroup.valid)
      this.dynamicFormGroup.markAllAsTouched();
   else
   {
      ...do something...
   }
}

You can use the following .css:

.labelTitle{
  float:left;
}
.validation-error
{
   display:none; //<--default display is none
   color:red;
}
.ng-submitted input.ng-invalid.ng-touched ~ div .validation-error
{
   display:inline-block; //<---display only if a 'brother' element is invalid
}
.ng-submitted input.ng-invalid.ng-touched ~ label 
{
   height:1.5rem;
}
.ng-submitted input.ng-invalid.ng-touched ~ label .validation-error
{
   display:inline-block;
}

It may seem a bit complex - I had to use label float:left because of the '*' symbol.

Check out the stackblitz example

I made some modifications to your StackBlitz project and implemented a new hasError function to check the validity of specific inputs. Please have a look and verify if the changes work as expected.

ngOnInit() {
    this.dynamicFormGroup = this.formBuilder.group({
      address: this.formBuilder.array([this.createItem()]),
    });
  }

  get addresses(): FormArray {
    return this.dynamicFormGroup.get('address') as FormArray;
  }

  hasError(index: number, controlName: string): boolean {
    const control = this.addresses.at(index).get(controlName);
    if (control) {
      return control.invalid && (control.dirty || control.touched);
    }
    return false;
  }

  addNewAddress(): void {
    this.addresses.push(this.createItem());
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      streetAddress: ['', Validators.required],
      city: ['', Validators.required],
      state: ['', Validators.required],
    });
  }

This is how the template should be structured:

<form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()">
    <div class="form-row" formArrayName="address">
      <ng-container *ngFor="let adress of addresses.controls; index as i">
        <div [formGroupName]="i">
          <div class="form-group col-md-3">
            <label for="password"><b>Street Address</b></label>
            <input
              type="text"
              class="form-control"
              placeholder="Street Address"
              name="SA"
              formControlName="streetAddress"
            />
            <div *ngIf="hasError(i, 'streetAddress')">
              <small class="validation-error">Please provide a title.</small>
            </div>
          </div>

          <!-- Other input fields -->

        </div>
      </ng-container>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

The issue with

dynamicFormGroup.get('name').invalid

in your code is resolved by correctly accessing the nested formGroup inside formArray using the index and formControlName parameters in the hasError function.