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

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?

Continue reading...