Angular4中如何初始化表单组？

Question

我有以下 ngOnInit 方法：

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

Answer 1

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

更新

改写：您必须在 angular 呈现模板之前实例化表单组。它比 angular 1.x 更严格，如果它无法在 html 表单呈现时评估模板绑定中的表达式，则会抛出错误。

因为你在模板中使用 *ngIf="shop" 我会说这意味着 shop 不为空 before then() 被执行 -也许最初，也许是通过其他一些功能 - 它不在您提供的代码中，所以我无法指出。

您要做的是使用某些服务获取的一些数据来初始化表单。这完全没问题 - 但仍然没有理由推迟创建控件。只需在构造函数中创建它们，然后使用 FormGroup's setValue(), patchValue() or reset() 在 ngOnInit 中设置值——具体取决于您的需要。以下只是想法，您需要根据自己的表单结构对其进行调整。

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>

Angular4中如何初始化表单组？

How to initialize form group in Angular 4?

angular2-formbuilder

angular