Доступ к значениям массива формы для отображения ошибки Mat

Question

FormGroup

this.locationForm = this.formBuilder.group({
          locationName: new FormControl(null, Validators.required),
          locationURL: new FormControl(null, Validators.required),
          workTiming: this.formBuilder.array([
            this.formBuilder.group({
              beginTime: new FormControl(null,Validators.required),
            })
          ])
        })

КОД HTML:

<div formArrayName="workTiming" >
         <div *ngFor="let item of workTiming.controls;                  
                      let pointIndex=index" [formGroupName]="pointIndex">
            <div class="container">
            <mat-form-field class="responsive">
                <input type="time" required formControlName="beginTime" matInput placeholder="Begin Time">
                <mat-error *ngIf="workTiming.get('beginTime').hasError('required')"> Enter begin time </mat-error>
            </mat-form-field>
          </div>
      </div>
    </div>

Мне нужна некоторая помощь о том, как получить доступ к имени formControl 'beginTime' внутри mat-error, так как я использую formArray, я не уверен, как получить к нему доступ. Если я даю как в коде, я получаю ошибку следующим образом

ERROR TypeError: Cannot read property 'hasError' of null

Answer 1

Спасибо за попытку, я нашел решение со следующим кодом:

<mat-error *ngIf="workTiming.controls[pointIndex].get('beginTime').hasError('required')"> Enter begin time </mat-error>

Answer 2

Вы пытаетесь получить доступ к вложенной форме напрямую, которая недоступна для внешнего контекста.Доступ к вложенной форме через родительскую форму аналогичен доступу к элементам объекта JS:

<mat-error *ngIf="locationForm.get('workTiming.beginTime').hasError('required')"> 
  Enter begin time 
</mat-error>