FormGroup expects a FormGroup instance. Please pass one in Ionic 4

Question

I cannot get an instance of Formbuilder in Ionic 4

I have imported the Formbuilder in the Class and in the constructor of the component.

It seems i cannot access the Formbuilder within a new function or within the storage or anything else ....

I can instanciate Formbuilder only in the constructor

This code below shows this error

// ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

this.storage.get('culture').then((val) => {

    this.subscriptionForm = this.formBuilder.group({
      UserName: ['', Validators.required],
      Password: ['', Validators.required],
      Email: ['', Validators.required],
      FirstName: ['', Validators.required],
      LastName: ['', Validators.required]
    });
}

I can get it if i call formbuilder before the storage function:

This code below shows no error !

this.subscriptionForm = this.formBuilder.group({
    UserName: ['', Validators.required],
    Password: ['', Validators.required],
    Email: ['', Validators.required],
    FirstName: ['', Validators.required],
    LastName: ['', Validators.required]
});

this.storage.get('culture').then((val) => {
    //  code...
}

This is the view :

<form [formGroup]="subscriptionForm">
    <h3 style="color: gray; text-align: center;">Registration</h3>

    <div class="row">
        <div class="col-md-6">
            <div class="md-form">
                <i class="fa fa-user prefix grey-text"></i>
                <input type="text" formControlName="UserName" id="UserNam" class="form-control">
                <label for="UserName">Your UserName</label>
            </div>
            <br>
            <div class="md-form">
                <i class="fa fa-user prefix grey-text"></i>
                <input type="text" formControlName="FirstName" id="FirstName" class="form-control">
                <label for="FirstName">Your First name</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="md-form">
                <i class="fa fa-user-secret prefix grey-text"></i>
                <input type="password" id="Password" formControlName="Password" class="form-control">
                <label for="Password">Your password</label>
            </div>
            <br>
            <div class="md-form">
                <i class="fa fa-user-user prefix grey-text"></i>
                <input type="text" id="LastName" formControlName="LastName" class="form-control">
                <label for="LastName">Your Last name</label>
            </div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-12">
            <div class="md-form">
                <i class="fa fa-envelope prefix grey-text"></i>
                <input type="email" id="Email" formControlName="Email" class="form-control">
                <label for="Email">Your Email</label>
            </div>
            <br>
            <br>
            <div class="text-center">
                <button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit()">Send
                    <i class="fa fa-paper-plane-o ml-1"></i>
                </button>
            </div>
        </div>
    </div>
</form>

Does this answer your question? [Methods in ES6 objects: using arrow functions](https://stackoverflow.com/questions/31095710/methods-in-es6-objects-using-arrow-functions) — Triby, Feb 17 '20 at 15:30
May be this could help me : https://stackoverflow.com/questions/46773047/how-to-initialize-form-group-in-angular-4 — de albuquerque frank, Feb 17 '20 at 15:38
Try wrapping your form in an `*ngIf="subscriptionForm"`, probably that `subscriptionForm` doesn't exist yet. — Sam, Feb 17 '20 at 15:40

score 0 · Answer 1 · answered Feb 17 '20 at 15:40

The error is present because of <form [formGroup]="subscriptionForm">.

Since you are passing undefined to form's formGroup, it says that it needs a value.

You can simply fix it by adding *ngIf="subscriptionForm".

<form *ngIf="subscriptionForm;else loading" [formGroup]="subscriptionForm">
  ...
</form>

<ng-template #loading><div>Loading...</div></ng-template>

FormGroup expects a FormGroup instance. Please pass one in Ionic 4

1 Answers1