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.

Does this answer your question? [Angular4 - No value accessor for form control](https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control) — ruth, Mar 23 '20 at 13:01
Try adding a *ngIf="form" to your
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] }); } — Jeff Gilliland, Mar 23 '20 at 13:26
Second option would be to move the initialization of the form into the constructor. Either way, @JeffGilliland is correct. — Philipp Meissner, Mar 23 '20 at 15:15
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 { const modal = await this.modalController.create({ component: ModalComponent }); return await modal.present(); }``` — Alyaura, Mar 23 '20 at 17:22
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. — Alyaura, Mar 23 '20 at 17:27
yes, thanks, this is the answer, i just wrote it up in more detail. — Raul Nohea Goodness, Jun 27 '20 at 18:43
You have saved my day thanks , I did the same mistake too *I was missing the import IonicModule in my module.* — reviloera, Sep 30 '21 at 12:52

score 10 · Answer 1 · answered Jun 27 '20 at 18:42

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.

score 1 · Answer 2 · answered Jan 07 '21 at 10:52

1

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>

answered Jan 07 '21 at 10:52

Banki Louis

126
2
3

score 0 · Answer 3 · answered Mar 16 '21 at 03:45

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)

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

3 Answers3