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

Question

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?

Answer 1

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