Access FormBuilder group in template

Hi people, I have a Formbuilder and a template. Now I want to access the type group. But can’t access it in my template. Get the error: Cannot not find control wtith path websites- -> 0. Can someone help me out? This is the code:

Angular typescript

    createForm() {
        this.websiteForm ={
            websites: this.formBuilder.array([

    initWebsite() {
            url: ['', Validators.required],
                id: ['', Validators.required]

Template Angular

<form [formGroup]="websiteForm" novalidate>

    <div formArrayName="websites">
        <div *ngFor="let website of websiteForm.controls.websites.controls; let i=index" [formGroupName]="i" >
                <ion-label floating>URL</ion-label>
                    formControlName="url" >

            <div [formGroupName]="type">
                    <ion-select interface="popover" formControlName="id">
                        <ion-option  *ngFor="let item of types" [value]="">{{ }}</ion-option>

Use get() instead of directly accessing controls, because the latter will break under AoT. How to deal with nested FormGroups is described here.

1 Like

Thank you for the suggestion.

What do you mean with AoT?

This. Ionic’s build system invokes it when you build in production mode.

Oke thank you!

I have one last question about the get() instead of directly accessing controls.
Can I do better this: websiteForm.get('websites').controls instead of websiteForm.controls.websites.controls

Or can I skip or replace the last controls part by the get()?

Not quite sure what the question is, but the fundamental thing to remember is never to type “controls.” in a template. The dot notation won’t work when done from outside the controller class, which under AoT the template is.