Validation inside FormGroup array for Select Angular

Question

I'm having a FormGroup inside which I have multiple controls and one among the controls was Select. I could validate other controls for the required field but not the Select control.

//HTML Code

 <div formArrayName="cand" *ngFor="let other of canForm.get('cand')['controls']; let i = index" class="form-group" style="margin-top: 10px">
       <div [formGroupName]="i">
                {{i + 1}}.
       <mat-form-field class="fWidth"><mat-label>Select Status:</mat-label>
               <mat-select formControlName="statusId" name="statusId">
                        <mat-option *ngFor="let val of statusList" aria-placeholder="Select Status" [value]="val.id">
                            {{val.name}}
                        </mat-option>
               </mat-select>    
            <mat-error *ngIf="candForm.get('cand').controls[i].get('statusId').hasError('required')">
                Field required.
            </mat-error>       
       </mat-form-field>
       </div>  
 </div>

//Component:

addCandFormGroup(name: string, statusId: number): FormGroup {
    return this.formBuilder.group({
      name: [name],
      statusId: [statusId, [Validators.required]] 
    });
  }

  addDetail() {
    (<FormArray>this.canForm.get('cand')).push(this.addCandFormGroup('',0));
  }

Tried,

*ngIf="f.submitted && select.invalid"

Where am i wrong? Any help