How to resolve No value accessor for form control name in Angular?

Question

I am trying to achieve the following where I can wrap <app-test-field> components inside the <form> tag where I can dynamically bind in formControlName and formGroup to TestField input as follows using Angular with StorybookJS.

However, I am encountering the following errors:

• core.mjs:11483 ERROR Error: NG01203: No value accessor for form control name: 'name'.
• core.mjs:11483 ERROR Error: NG01050: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

In TestField.stories.js

Here is the template for my Angular component in StorybookJS.

<form [formGroup]="sampleForm">
  <!-- name input -->
  <app-test-field [label]="label" [formControlName]="formControlName"></app-test-field>  
  <!-- email input... -->  
  <!-- more inputs... --> 
</form>

In test-field.component.html

<div class="form-group">
  <label for="{{ formControlName }}">{{ label }}</label>
  <input
    type="text"
    class="form-control"
    [formControlName]="formControlName"
    [id]="formControlName"
  /><br />
</div>

In test-field.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-test-field',
  templateUrl: './test-field.component.html',
  styleUrls: ['./test-field.component.css'],
})
export class TestFieldComponent {
  @Input() label: string = '';
  @Input() formControlName: string = '';
}

I researched most examples online where the input itself is wrapped around with the <form> tag in the component itself as below:

<form [formGroup]="registerForm">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" [ngClass]="inputDanger" formControlName="name"><br/>
    </span>
    <br/>
  </div>
</form>

But I want to remove form tag such that the end goal would be the following where input is a component by itself wrapped inside a <form> tag as follows:

<form [formGroup]="sampleForm">
  <!-- name input -->
  <app-test-field [label]="label" [formControlName]="formControlName"></app-test-field>  
  <!-- email input... -->  
  <!-- more inputs... --> 
</form>

Can someone help me with this? Is anything missing?

Answer 1

I was Using StandAlone Approch to bind the Quantity IOn-Input and started facing no value Accessor issue in the following Code

  <ion-item>
        <ion-label>Quantity</ion-label>
        <ion-input
          type="number"
          name="quantity"
          [(ngModel)]="quantity"
          min="1"
          max="100"
          maxlength="3"
          (ionInput)="validateQuantity($event)"
        ></ion-input>
      </ion-item>

I Added IonInput To Imports Array and it solved my problem.

imports: [IonImg, IonInput]

Answer 2

In my case, in which I am migrating my angular v10 app to v18, it was that I haven't imported the right component into the imports section of my parent component, as all of them work as standalone now. Such a silly mistake, but again, as appointed for others, this error message doesn't lead you anywhere near from the error.