I am trying to insert multiple filed using the FormArray. The error in the console is showing error TS7053: Element implicitly has an 'any' type because expression of type '"controls"' can't be used to index type 'AbstractControl<(string | null)[], (string | null)[]>'. I cant figure this out. The codes are as follows : [1] HTML FILE
<h1 >SIGN UP FORM </h1>
<mat-stepper [linear]="isLinear" #stepper>
<mat-step >
<form [formGroup]="infoForm">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput placeholder="Last name, First name" formControlName="name"
type="text" class="form-control" id="name"
required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
**</form>
</mat-step>
<mat-step >
<form [formGroup]="infoForm">
<ng-template matStepLabel>Fill out your email address</ng-template>
<mat-form-field appearance="fill">
<div class="mb-3">
<mat-label for="email" class="form-label">Email address :</mat-label>
<input matInput formControlName="email" type="email"
class="form-control" id="email" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
</mat-form-field >
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step >
<form [formGroup]="infoForm">
<ng-template matStepLabel>Fill out your password</ng-template>
<mat-form-field>
<div class="mb-3">
<mat-label for="password" class="form-label">Password :</mat-label>
<input matInput formControlName="password" type="password"
class="form-control" id="password">
</div>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step >
<form [formGroup]="infoForm">
<ng-template matStepLabel>Fill out your number</ng-template>
<mat-form-field>
<div class="mb-3">
<mat-label for="password" class="form-label">Number :</mat-label>
<input matInput formControlName="phoneNumber"
type="number" class="form-control" id="number">
</div>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form [formGroup]="infoForm">
<ng-template matStepLabel>date of birth</ng-template>
<mat-form-field>
<div class="mb-3">
<mat-label for="dob" class="form-label">Date Of Birth :</mat-label>
<input matInput name="date" formControlName="dob" type="date" class="form-control" id="dob">
</div>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form [formGroup]="infoForm">
<ng-template matStepLabel>Add expertise :</ng-template>
<mat-form-field>
<div formArrayName="expertise">
<div class="mb-3">
<mat-label for="expertise" class="form-label">Expertise :</mat-label>
<ng-container *ngFor="let expertise of infoForm.get('expertise')['controls'];index as i">
<input matInput name="expertise" formControlName="{{i}}" type="text" class="form-control" id="expertise">
</ng-container>
</div>
</div>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
<button (click)="doSubmit()" mat-button type="submit">Submit</button>
</div>
</form>
</mat-step>
</mat-stepper>
<div class="container">
<span>
<h1>Already registered ?</h1> <a href="/login" class="btn btn-outline-primary">Login</a>
</span>
</div>**
[2] Type Script file :
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {SignupService} from "../services/signup.service";
import Swal from 'sweetalert2';
import {Router} from "@angular/router";
@Component({
selector: 'signup-page',
templateUrl: './signup-page.component.html',
styleUrls: ['./signup-page.component.css']
})
export class SignupPageComponent implements OnInit {
isLinear = true;
infoForm=new FormGroup({
name:new FormControl<any>(""),
email:new FormControl<any>(""),
password:new FormControl<any>(""),
phoneNumber:new FormControl<any>(""),
dob:new FormControl<any>(""),
expertise:new FormArray([
new FormControl(""),new FormControl(""),new FormControl("")
])
});
constructor(private services:SignupService,/*private step:StepsService*/
private router :Router,private _formBuilder: FormBuilder) {
}
ngOnInit(): void {
}
doSubmit(){
console.log("Form submitted");
console.log(this.infoForm);
this.services.signUp(this.infoForm.value).subscribe(
response=>{
Swal.fire('SUCCESS !!','user registered','success');
console.log(response);
this.router.navigate(['/dashboard']); },
error => {
Swal.fire('Error','error in registering ','error')
this.router.navigate(['/dashboard']);
console.log(error);
}
)
}
}