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 = this.formBuilder.group({
            websites: this.formBuilder.array([
                this.initWebsite()
            ])
        });
    }

    initWebsite() {
        return this.formBuilder.group({
            url: ['', Validators.required],
            type: this.formBuilder.group({
                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-item>
                <ion-label floating>URL</ion-label>
                <ion-input
                    type="text"
                    name="url"
                    formControlName="url" >
                </ion-input>
            </ion-item>

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

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.