Error 'No value accessor for form control with name' with ionic 5 and Angular 9 using reactive form

Question

I'm working with ionic 5 and Angular 9. I'm trying to create a reactive form but I got the error 'No value accessor for form control with name: 'lastname''.

Here is my code :

export class ModalComponent implements OnInit {

  public form: FormGroup;

  constructor(private modalController: ModalController,
              private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.initForm();
  }

  public close(): void {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalController.dismiss({
      'dismissed': true
    });
  }

  public initForm(): void {
    this.form = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required]
    });
  }

  logForm(){
    console.log(this.form.value)
  }
}

<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
    <ion-item>
      <ion-label>Last name</ion-label>
      <ion-input type="text" formControlName="lastname"></ion-input>
    </ion-item>
</form>

Edit : I just found the problem. I was missing the import IonicModule in my module.

Cutback

Does this answer your question? Angular4 - No value accessor for form control – Clover

Try adding a *ngIf="form" to your <form> tag. You aren't initializing your form until ngOnInit, where as the template already exists prior to that. Hence your formControlName="lastname" is erroring out because your form doesn't exist yet. Other options include initializing it in the constructor, or simply initializing it at the property: public form: FormGroup = this.formBuilder.group({ firstname: ['', Validators.required], lastname: ['', Validators.required] }); } – Wedded

Second option would be to move the initialization of the form into the constructor. Either way, @JeffGilliland is correct. – Immoderacy

I tried both options but it didn't work. I tried to create another form in my page component and it worked perfectly. Maybe it's because I'm trying to create a form in a modal component. My modal component is called using : public async presentModal(): Promise<void> { const modal = await this.modalController.create({ component: ModalComponent }); return await modal.present(); } – Cutback

I found my problem and I edited my initial question with the explanation. There is no need to initialize the form in the constructor or check if the form is null in the template. It was just a missing import. – Cutback

yes, thanks, this is the answer, i just wrote it up in more detail. – Ackler

You have saved my day thanks , I did the same mistake too I was missing the import IonicModule in my module. – Circular

Answer 1

If your component (ModalComponent) is initialized from your own shared module (MyModule), you have to import IonicModule so it knows how to render with the value="" attribute.

my.module.ts:

...
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [ModalComponent],
  imports: [CommonModule],
  exports: [ModalComponent, FormsModule, ReactiveFormsModule, IonicModule],
})
export class MyModule {}

I was just dealing with this, and it took me a while to figure out the ReactiveForms code was trying to access the <input value=""> attribute which didn't exist because it was still an untransformed <ion-input> element.

Ackler

Answer 2

I had the same problem and fixed it by adding ngDefaultControl to the input tag.

<ion-input type="text" name="address" value="" formControlName="address" ngDefaultControl></ion-input>

Yolanda

Answer 3

If you are on a standalone component and followed ion-modal or some similar examples which contains ion-input, you might have forgotten to import ion-input, but have already imported ion-modal.

Adding ngDefaultControl like this might fix the problem, but;

<ion-input [(ngModel)]="name" ngDefaultControl >

the actual fix would be adding IonInput to the imports:[]

import { IonModal, IonInput, } from '@ionic/angular/standalone';

A similar error NG8001 for unknown element wasn't showing for ion-input in this case.

error NG8001: 'ion-modal' is not a known element:

Uta

I was using standalone and IonInput import was missing. There was no compiler error. Hence, I assumed all imports were correct. I wonder why there was no compiler error. – Horatius

Answer 4

maybe you are using a ionic component who cant use formControlName attribute or writting wrong it. for example togle -->toggle:

<ion-togle [formControlName]="myName"></ion-togle>

(this throw a error 'No value accessor for form control with name:..." )

instead of

<ion-toggle  [formControlName]="myName"></ion-toggle> 

(works fine,no error)

Catalepsy