Angular 2 RC-4 表单，类型“FormGroup”不可分配给类型“typeof FormGroup”答案

【问题标题】：Angular 2 RC-4 forms, Type 'FormGroup' is not assignable to type 'typeof FormGroup'Angular 2 RC-4 表单，类型“FormGroup”不可分配给类型“typeof FormGroup”
【发布时间】：2016-11-21 03:56:24
【问题描述】：

我在使用 Angular 2 表单时遇到了一些问题，我在我的项目中成功实现了一些表单，当我尝试添加这个表单时，我从我的 Angular Cli 中得到错误： Type 'FormGroup' is not assignable to type 'typeof FormGroup'.

有人遇到过这个吗？

这是我的组件代码：

import { Component } from '@angular/core';
import {AngularFire} from "angularfire2/angularfire2";

import {DataService} from "../../shared/data.service";
import {FormGroup, FormBuilder, Validators} from "@angular/forms";

@Component({
  moduleId: module.id,
  selector: 'tm-address-book',
  templateUrl: 'address-book.component.html',
  styleUrls: ['address-book.component.css'],
  providers: [DataService]
})
export class AddressBookComponent {
  myAddressForm = FormGroup;
  addressbook: Array<any>;

  constructor(private af: AngularFire,
          private formBuilder: FormBuilder,
          private dataService: DataService) {
  af.database.list('Addressbook').subscribe(address => {
    this.addressbook = address;
    console.log(this.addressbook);
  });

  this.myAddressForm = formBuilder.group({
    'companyName': ['', Validators.required],
    'street': ['', Validators.required],
    'city': ['', Validators.required],
    'postCode': ['', Validators.required],
  })
}

这里是html表单代码：

<form [formGroup]="myAddressForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
              <input type="text" class="form-control" formControlName="companyName" name="companyName" placeholder="Nazwa firmy">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" formControlName="street" placeholder="Ulica">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" formControlName="city" name="city" placeholder="Miejscowość">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" formControlName="postCode" name="postCode" placeholder="Kod pocztowy">
            </div>
            <button type="submit" class="btn btn-success waves-effect waves-light" data-toggle="collapse" data-target="#collapse1">
              Dodaj
            </button>
          </form>

【问题讨论】：

标签： angular forms typescript

【解决方案1】：

我遇到了同样的情况，Angular CLI 开始在 html 模板中显示一些奇怪的错误。错误信息是：

Type 'FormGroup' is not assignable to type 'FormGroup'

我试图改变这个：

loginForm: FormGroup;

到这里：

loginForm = new FormGroup({});

它起作用了，它起作用的原因是因为第二种情况初始化了formBuilder的控件。

【讨论】：

【解决方案2】：

尝试一次，它的工作

registerForm =new FormGroup({});

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案3】：

我猜你把= 和: 搞砸了。

将您的 myAdressForm 定义更改为：

export class AddressBookComponent {

   myAddressForm : FormGroup;
   ...
}

您键入它的方式 (myAdressForm = FormGroup)，会将属性 myAdressForm 分配给 FormGroup 的类类型

【讨论】：

正确...这总有一天会把我送进坟墓。这是我第二次在这种类型/价值分配上失败...谢谢
谢谢，我希望有一天我的 TypeScript linter 会变得像你一样聪明。
@PierreDuc - 关于这个stackoverflow.com/questions/54515500/…的任何线索@
@MatWaligora，您可能应该接受答案，因为它有效并且您同意！