Javascript FormGroup需要一个FormGroup实例。请递一张4号票

我无法在Ionic 4中获得Formbuilder的实例

我已经在类和组件的构造函数中导入了Formbuilder

似乎我无法在新函数或存储或其他任何内容中访问Formbuilder

我只能在构造函数中实例化Formbuilder

下面的代码显示了此错误

// 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]
    });
}

如果我在存储函数之前调用formbuilder，我可以得到它：

下面的代码显示没有错误

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...
}

这是一种观点：

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

登记处
您的用户名


你的名字
你的密码


你的姓


你的电子邮件




发送

出现错误的原因是

由于您正在将

未定义的

传递给表单的

表单组

，它表示它需要一个值

只需添加

*ngIf=“subscriptionForm”

即可解决此问题

...
加载。。。

同时发布

HTML

模板的代码。这是否回答了您的问题？这可能对我有帮助：尝试将表单包装成

*ngIf=“subscriptionForm”

，可能

subscriptionForm

还不存在。