如何在Angular 4中初始化表单组？ [英] How to initialize form group in Angular 4?

问题描述

我有以下ngOnInit方法：

I have the following ngOnInit method:

ngOnInit() {
    this.countries = this.sharedService.getCountries();
    this.shopService.getCurrentShopFromCache().then(shop => {
        this.shop = shop;
        this.myFormGroup = this.fb.group({
            name: [this.shop.name[this.shop.defaultLanguage.code], [Validators.required]],
            address: [this.shop.address.address],
            city: [this.shop.address.city],
            state: [this.shop.address.state],
            country: [this.shop.address.country, [Validators.required]],
            phone: [this.shop.phone],
            email: [this.shop.email],
            website: [this.shop.social.website],
            twitter: [this.shop.social.twitter],
            facebook: [this.shop.social.facebook],
            instagram: [this.shop.social.instagram],
            foursquare: [this.shop.social.foursquare]
        });
    }
    );
}

我要得到

formGroup expects a FormGroup instance. Please pass one in.

我在哪里错了？

更新：

 <form *ngIf="shop" class="m-form m-form--fit m-form--label-align-right" [formGroup]="myFormGroup" novalidate>
                       ... 

推荐答案

您必须在组件创建时即在构造函数中立即实例化formgroup，否则angular根本找不到绑定模板属性的对象。

UPDATE

重述：您必须实例化表单组，然后才能通过angular渲染模板。它比angular 1.x严格，如果无法在html表单呈现时评估模板绑定中的表达式，则会引发错误。

Rephrasing: you have to instantiate form group before template gets rendered by angular. It's stricter than angular 1.x and throws an error if it cannot evaluate expression in template binding at the time of html form rendering.

由于使用的是 * ngIf = shop 在模板中，我想说的是之前， shop 不会变为空> then（）被执行-可能最初是通过其他函数执行的-它不在您提供的代码中，因此我无法指出。

Since you're using *ngIf="shop" in the template I'd say it means that shop turns not null before then() gets executed - maybe initially, maybe by some other function - it's not in the code you provided, so I can't point it out.

要做的是使用某些服务获取的某些数据来初始化表单。完全可以-但是仍然没有理由推迟控件的 创建 。只需在构造函数中创建它们，然后在ngOnInit中使用 FormGroup的 setValue（）， patchValue（）或 reset（）-取决于根据您的实际需求。下面只是个想法，您需要将其调整为表单结构。

What you're trying to do is to initialize form with some data fetched by some service. That's totally fine - but it's still no reason to postpone creation of controls. Just create them in the constructor and set values later in the ngOnInit using FormGroup's setValue(), patchValue() or reset() - depending on what exactly you need. Below is just the idea, you'll need to adjust it to your form structure.

app.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    formGroup: FormGroup;

    constructor(fb: FormBuilder) {
        this.formGroup = fb.group({
            title: fb.control('initial value', Validators.required)
        });
    }

    ngOnInit(): void {
        this.formGroup.reset({title: 'new value'});
    }

}

app.component。 html

<form [formGroup]="formGroup">
    <input type="text" formControlName="title">
</form>

这篇关于如何在Angular 4中初始化表单组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！