<div class="row" *ngFor="let competitor of competitorForm.controls['competitors'].controls; let i = index" formGroupName="{{i}}">
    {{ submitted && competitor.controls.firstname.errors!=null }}
    <!-- return true when clicked-->
    {{ competitor.controls.firstname.errors.required }}
    <!-- return true-->
    <div class="col-md-3">
        <div class=" form-group">
            <input type="text" class="input-lg" formControlName="firstname" placeholder="First name" [ngClass]="{ 'is-invalid': submitted && competitor.controls.firstname.errors }">
            <div *ngIf="submitted && competitor.controls.firstname.errors!=null" class="invalid-feedback">
                <div *ngIf="competitor.controls.firstname.errors.required">
                    firstname is required
                </div>
            </div>
        </div>
    </div>

ngOnInit() {
    const competitors: FormArray = new FormArray([
      new FormGroup({
        firstname: new FormControl('', Validators.required),
        lastname: new FormControl('', Validators.required),
        email: new FormControl('', Validators.email),
      })
    ]);
    this.competitorForm = this.fb.group({competitors: competitors});
  }

onSubmit() {
    this.submitted = true;
    if (this.competitorForm.invalid) {
      console.log('invalid'); // is triggered
      return;
    }
    ...
}