Getting error while using Angular Form Array

Question

Why am I getting this error, and how to get it fixed: TS2740: Type 'AbstractControl<any, any>' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 2 more.

At this point it is giving error in my html:

my html:

<button type="button" (click)="addName()">Add Name</button>

<div formArrayName="names">
    <div *ngFor="let nm of getNames.controls">
        <div [formGroup]="nm"> //THIS LINE IS GIVING ERROR
            <input formControlName="fname" type="text" placeholder="First Name">
            <input formControlName="lname" type="text" placeholder="Last Name">
        </div>
    </div>
</div> 

<div>
    <button type="submit">Submit</button>
</div>

my ts:

export class TestComponent implements OnInit {     
    constructor(private fb: FormBuilder) { }

    form = this.fb.group({
        names: this.fb.array([])
    });

    get getNames(){
        return this.form.controls["names"] as FormArray;
    }

    addName(){
        const newName = this.fb.group({
            fname: ['', Validators.required],
            lname: ['', Validators.required]
        });
        this.getNames.push(newName);
    }

    onSubmit():void{
        console.log(this.form.value)
    }

   ngOnInit(): void {

   }

}

shyam yadav · Accepted Answer · 2022-09-23 20:00:19Z

0

I got it resolved by using $any in html as below.

<div *ngFor="let nm of  $any(getName).controls; let i=index">

answered Sep 23, 2022 at 20:00

shyam yadav

2751 silver badge12 bronze badges

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

Comments

Mike Awad · Accepted Answer · 2022-12-14 06:04:08Z

0

hi i us this way try it

 <div *ngFor="let nm of  getName.controls; let i=index" [formGroupName]="i">

answered Dec 14, 2022 at 6:04

Mike Awad

11 bronze badge

1 Comment

Jeremy Caney Over a year ago

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?

Collectives™ on Stack Overflow

Getting error while using Angular Form Array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related