Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Accessing FormArray content for validation but receives null or undefined error

HTML

<form [formGroup]="newMovieForm">
   <ng-container formArrayName="actors">
     <ng-container *ngFor="let actor of (actors['controls'] || []) ; let i = index">
        <div [formGroupName]="i">  
            <input type="text" class="form-control" placeholder="First Name" formControlName="firstName" required>
                 <span *ngIf="newMovieForm.controls['actors']?.get(i).controls['firstName'].errors?.['hasSpaces']">class="text-danger">
                     Field is required!
                </span>

TS Main Form Group

this.newMovieForm = this.fb.group({
      // This are known as controls
      movieName: ['', [Validators.required, CustomValidators.noSpaceAllowed]],
      yearOfRelease: ['', [Validators.required]],
      description: ['', [Validators.required]],
      rentalCost: ['', [Validators.required, CustomValidators.onlyNumbersAllowed]],
      imageUrl: ['', [Validators.required, CustomValidators.noSpaceAllowed]],
      actors: this.fb.array([]),
      userReviews: this.fb.array([])
    })

TS Add-on Form Group

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

addActor() {
    const actor = this.fb.group({
      firstName: ['', [Validators.required, CustomValidators.noSpaceAllowed]],
      lastName: ['', [Validators.required, CustomValidators.noSpaceAllowed]],
      gender: ['', [Validators.required]],
      age: ['', [Validators.required]],
      imageUrl: ['', [Validators.required, CustomValidators.noSpaceAllowed]]
    });
    this.actors.push(actor);
  }

I am try to access the firstName.validators of the actor formGroup so I can display a specific error if the user does not fulfil certain criteria. I am confused about two things:

*ngIf="newMovieForm.controls['actors']?.get(i).controls['firstName'].errors?.['hasSpaces']
  1. I am not sure if the above statement is correct in checking if the specific field is valid

  2. If the above statement is correct. I can’t seem to get rid of the Object is possibly "null" or "undefined" despite using ? or null checks like

*ngIf=" i !== null && i ! == undefined"

I do not wish to turn off strict mode, is there a way i can fix this issue.

>Solution :

<ng-container formArrayName="actors">
 <ng-container *ngFor="let actor of (actors['controls'] || []) ; let i = index">
    <div [formGroupName]="i">  
        <input type="text" class="form-control" placeholder="First Name" formControlName="firstName" required>
             <span *ngIf="newMovieForm.hasError('hasSpaces','actors.'+i+'.firstName')">class="text-danger">
                 Field is required!
            </span>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading