CSS Tricks
<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>
JS Form Building Logic
this.newMovieForm = this.fb.group({
// These are the essential 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([])
})
Advanced Form Group Methodology in JS
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);
}
Struggling to Access Validators in Angular Forms
I am attempting to access the firstName validators within the actor formGroup for specific error handling. There are a couple of issues causing confusion:</p>
*ngIf="newMovieForm.controls['actors']?.get(i).controls['firstName'].errors?.['hasSpaces']
<ol>
<li><p>Uncertain about whether the above syntax accurately validates the field</p>
</li>
<li><p>Despite including null checks like ? or checking for undefined, still facing Object is possibly "null" or "undefined" warning.</p>
</li>
</ol>
I prefer not to disable strict mode, seeking solutions for this problem.