CODEWITHSUNDEEP
angulartypescriptangular-reactive-forms
Joshua Ohana
Joshua Ohana

Reputation: 6141

Angular reactive forms, input Error: No value accessor for form control with name

I have an input defined as below

    <form [formGroup]="loginForm"">
      <ion-input [formControlName]="'email'"></ion-input>

My component declares the form as

this.loginForm = this.formBuilder.group({
  email: ['', Validators.compose([Validators.required, Validators.email])],
  password: ['', Validators.required]
});

Yet at runtime angular is throwing this error

ERROR Error: No value accessor for form control with name: 'email'

I have ensured I have both ReactiveFormsModule & FormsModule in my modules Import

Any other ideas what I'm missing?

Upvotes: 1

Views: 1539

Answers (1)

Owen Kelvin
Owen Kelvin

Reputation: 15083

You have not imported the module where <ion-input> was declared

Detailed Explanation

With Angular 9+, fullTemplateTypeCheck is set to false hence angular will not complain See Below statement from github Ivy is not complaining about unknown element inside ng-template #36171

This is due to an architectural change in Ivy. In the previous compiler (ViewEngine), the check for unknown elements would occur during parsing of the template. In Ivy, templates are parsed independently from the corresponding NgModule, so information on components/directives in scope is not available. Instead, checking of elements is pushed into the template type checking phase and it's currently affected by the type checker's configuration. With fullTemplateTypeCheck set to true however, it should descend into templates to check them (when it's false, it won't for backwards compatibility reasons)

The Engine will not complain about the unknown element but will complain about the valueAccessor

Upvotes: 3

Related Questions