5

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.

7
  • Does this answer your question? Angular4 - No value accessor for form control
    – ruth
    Mar 23, 2020 at 13:01
  • 2
    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] }); } Mar 23, 2020 at 13:26
  • Second option would be to move the initialization of the form into the constructor. Either way, @JeffGilliland is correct. Mar 23, 2020 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<void> { const modal = await this.modalController.create({ component: ModalComponent }); return await modal.present(); }
    – Alyaura
    Mar 23, 2020 at 17:22
  • 1
    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, 2020 at 17:27

3 Answers 3

10

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.

0
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>
0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.