🐞 - Accordion throws error if [tuiAccordionItemContent] includes FormGroup

[nsbarsukov]

Playground Link

https://stackblitz.com/edit/accordion-form-control-error?file=src%2Fapp%2Fapp.template.html

Description

<!-- No error ✅ -->
<form [formGroup]="testForm">
  <tui-input formControlName="name"></tui-input>
</form>

<tui-accordion>
  <tui-accordion-item>
    Click me to see error

    <ng-template tuiAccordionItemContent>
      <form [formGroup]="testForm">
        <!-- It throws error on click ❌ -->
        <tui-input formControlName="name"></tui-input>
      </form>
    </ng-template>
  </tui-accordion-item>
</tui-accordion>

Error logs:

ERROR Error: NG01350: 
    ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
    formGroup's partner directive "formControlName" instead.  Example:

    
  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });

    Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

    Example:

    
  <div [formGroup]="myGroup">
      <input formControlName="firstName">
      <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
  </div>

    at modelParentException (ng_model_group.ts:35:1)
    at NgModel._checkParentType (ng_model.ts:242:14)
    at NgModel._checkForErrors (ng_model.ts:240:14)
    at NgModel.ngOnChanges (ng_model.ts:342:9)
    at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (ng_onchanges_feature.ts:74:12)
    at callHookInternal (hooks.ts:289:7)
    at callHook (hooks.ts:321:4)
    at callHooks (hooks.ts:269:11)
    at executeInitAndCheckHooks (hooks.ts:204:7)
    at selectIndexInternal (write_to_directive_input.ts:49:6)

Angular version

16 & 18

Taiga UI version

4.0.0-rc.6

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android