This question was originally posted by JOYBOY but was later deleted. The title of the question was NG01203: No value accessor for form control name: 'name'
In my Angular 18 application, I am utilizing both standalone components and module-based components for reusability purposes.
To enhance reusability, I have created an input component. However, I am encountering an error:
ERROR Error: NG01203: No value accessor for form control name: 'name'. Find more at https://angular.dev/errors/NG01203
at _throwMissingValueAccessorError (forms.mjs:3420:9)
at setUpControl (forms.mjs:3202:29)
at _FormGroupDirective.addControl (forms.mjs:5320:5)
at _FormControlName._setUpControl (forms.mjs:6011:39)
at _FormControlName.ngOnChanges (forms.mjs:5960:28)
at _FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:3975:10)
at callHookInternal (core.mjs:5004:10)
at callHook (core.mjs:5031:5)
at callHooks (core.mjs:4988:9)
at executeInitAndCheckHooks (core.mjs:4943:5)
type InputProps = {
formGroup: FormGroup;
type: 'text' | 'password' | 'number';
value: string;
label: string;
formControlName: string;
placeholder: string;
checkValidation: boolean;
}
@Component({
selector: 'app-input',
standalone: true,
imports: [
FormsModule,
ReactiveFormsModule,
NgClass
],
templateUrl: './input.component.html',
})
export class InputComponent {
public readonly formGroup = input.required<FormGroup>();
public readonly label = input.required<InputProps['label']>();
public readonly formControlName = input.required<InputProps['formControlName']>();
public readonly checkValidation = input<InputProps['checkValidation']>(false);
public readonly placeholder = input<InputProps['placeholder']>();
public type = input<InputProps['type']>('text');
public value = input<InputProps['value']>('');
}
input.component.html
<input
[type]="type()"
[id]="label()"
[formControlName]="formControlName()"
[ngClass]="inputBaseClasses"
[value]="value()"
/>
<label [for]="label()" [ngClass]="labelBaseClasses">
{{ label() }}
</label>
</div>
I am including this input component in my AuthModule.ts
@NgModule({
declarations: [
LoginComponent,
RegisterComponent,
AuthComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
AuthRoutingModule,
AngularSvgIconModule.forRoot(),
ButtonComponent,
InputComponent
],
exports: [
FormsModule,
ReactiveFormsModule
]
})
export class AuthModule { }
app.route.ts
export const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: AppComponent
},
{
path: 'auth',
loadChildren: () => import('@app/core/auth/auth.module')
.then(m => m.AuthModule)
}
];
I am utilizing the app-input component like this:
<app-input
label="Name"
formControlName="name"
[formGroup]="signUpForm"
></app-input>
Even after exporting FormsModule & ReactiveFormsModule from AuthModule.ts, I am still encountering the error "no value accessor for form control : 'name'."
I am currently stuck and seeking guidance.