How to validate formgroup at mat-stepper if array is empty or not

I am implementing mat-stepper in my code and stucked in a problem which I need your help. On the second form group I have Array of Objects which I show only the data in that form. But I want that if Array is empty then I will get Validation error and if there exist data then I can go in the next step. I tried on this way but the problem it is that the Validation does not work if empty or even if there is any object.

Something like this looks my Code.

TS.

export class CreateYourJobComponent implements OnInit {

  public job = new Job();
  firstFormGroup = this._formBuilder.group({
    positionTitle: ['', Validators.required],
    employmentType: ['', Validators.required],
    street: ['', Validators.required],
    postalCode: ['', Validators.required],
    city: ['', Validators.required],
    country: ['', Validators.required],
    state: ['', Validators.required]
  });
  secondFormGroup = this._formBuilder.group({
    pcKnowledge:[''],
    skillsOffer: this._formBuilder.array([], Validators.required),
    driveLicense:  [''],
    language: [''],
    qualifications:  [''],
  });
  thirdFormGroup = this._formBuilder.group({
    salaryBudget: ['', Validators.required],
    salaryStatus: ['', Validators.required],
  });
}
 constructor(private _formBuilder: FormBuilder,
  
    public dialog: MatDialog,
    ) { }

addSkillsOffer(data: EditOffer) {
    this.dialog.open(OfferDialogComponent, {
      data,
    }).afterClosed().subscribe((res) => {
      if (!res) {
        return;
      } else {
          this.job.skillsOffer = res.skillsOffer;
      }
    });
   }

My HTML:

 <mat-horizontal-stepper [linear]="true" #stepper style="margin-left: 20px; margin-top: 1rem">
       <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
        </form>
    </mat-step>
  <mat-step [stepControl]="secondFormGroup">
        <form [formGroup]="secondFormGroup">
 <li class="mat-form-field--inline">
        <mat-form-field appearance="fill">
          <mat-label> {{ "skills.offer" | translate }} </mat-label>
          <div class="card__body d-flex column">
            <div class="d-flex align-items-center card__body__list">
              <div *ngFor="let sp of job.skillsOffer; let i = index" formArrayName="skillsOffer" class="d-flex justify-content-between pr-1">
                <div class="card__text">
                  {{ sp.name }}
                  <span class="fa fa-remove" (click)="removeSkills(i)"></span>
                </div>
              </div>
              <input matInput name="zip" type="text" [(ngModel)]="skillsOffer" formControlName="skillsOffer" style="display: none !important;" required>
              <button class="btn btn-light ml-1" (click)="addSkillsOffer({createJob: true})">
                <i class="fa fa-pencil"></i>
              </button>
            </div>
          </div>
        </mat-form-field>
        </form>
    </mat-step>
    </mat-horizontal-stepper>

Model of Job:

export class Job {
  salaryStatus?: string;
  salaryBudget?: number;
  positionTitle?: string;
  employmentType: string;
  street?: string;
  postalCode?: number;
  city?: string;
  country?: string;
  state?: string;
  pcKnowledge: PCKnowledge[];
  skillsOffer: SkillOffer[];
  driveLicense?: DriveLicense[];
  language?: Language[];
  qualifications?: Qualifications[];
}