Accessing form Array values to display Mat Error

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 CODE:

<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>

I need some help on how to access the formControl name of 'beginTime' inside mat-error, since i'm using the formArray, I'm not sure on how to access it. If I give like in the code I get the error as follows

ERROR TypeError: Cannot read property 'hasError' of null

PremKumar · Accepted Answer · 2019-05-09 13:01:05Z

6

Thanks for trying, I found the solution with the following code:

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

answered May 9, 2019 at 13:01

PremKumar

1,3525 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maihan Nijat · Accepted Answer · 2019-05-09 12:41:28Z

0

You are trying to access the nested form directly which is not available for outside context. Access the nested form through parent form same like you access JS object elements:

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

answered May 9, 2019 at 12:41

Maihan Nijat

9,36313 gold badges69 silver badges117 bronze badges

1 Comment

PremKumar Over a year ago

Thank you, but the above answer doesn't work as expected. It worked with the following code: <mat-error *ngIf="workTiming.controls[pointIndex].get('beginTime').hasError('required')"> Enter begin time </mat-error>

allwiine · Accepted Answer · 2020-01-27 09:57:11Z

0

Can be writtern as

<mat-error *ngIf="item.get('beginTime').errors?.required"> Enter begin time </mat-error>

answered Jan 27, 2020 at 9:57

allwiine

314 bronze badges

Collectives™ on Stack Overflow

Accessing form Array values to display Mat Error

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related