To resolve this issue, consider using an alternative approach to access the control instead of encountering errors with the dot notation. One potential solution is to utilize dynamic access methods by using controls in place of getControl.
getControl(labelName: string) {
return this.FormGroup.controls[labelName];
}
Complete Code:
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
FormBuilder,
ReactiveFormsModule,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import 'zone.js';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
template: `
<form [formGroup]="FormGroup">
<div *ngFor="let data of fieldsData">
<ng-container [ngSwitch]="data.inputType">
<ng-container *ngSwitchCase="'dropdown'">
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</ng-container>
<ng-container *ngSwitchCase="'textbox'"><textarea [formControlName]="data.labelName"></textarea></ng-container>
<ng-container *ngSwitchDefault><input type="text" [formControlName]="data.labelName"></ng-container>
</ng-container>
<div *ngIf="FormGroup.get(data.labelName) as control" class="checkValue"> <div *ngIf="(control.touched || control.dirty) && (!control.valid)"> <p class="errorMsg" *ngIf="control.errors?.['required']">This field is required</p> <p class="errorMsg" *ngIf="control.errors.pattern">Please provide a valid email address</p> </div> </div>
<label>{{data.labelName}} </label>
</div>
<button class="btn-submit" type="button" [disabled]="!FormGroup.valid" style="margin-top: 20px" (click)="SubmitDemo()">
Submit
</button>
</form>
`,
})
export class App {
fieldsData = [
{
labelName: 'Name',
inputType: 'textbox',
inputValues: '',
mandatory: 'yes',
},
{
labelName: 'contact no.',
inputType: 'textbox',
inputValues: '',
mandatory: 'yes',
},
{
labelName: 'address 2',
inputType: 'textarea',
inputValues: null,
mandatory: 'yes',
},
];
FormGroup!: FormGroup;
ngOnInit() {
const form: any = {};
this.fieldsData.forEach((ele, i) => {
const validators = ele?.mandatory === 'yes' ? [Validators.required] : [];
form[ele?.labelName] = new FormControl('', validators);
});
this.FormGroup = new FormGroup(form);
}
SubmitDemo() {}
}
bootstrapApplication(App);