angularformstypescript

Angular 2 RC-4 forms, Type 'FormGroup' is not assignable to type 'typeof FormGroup'


I am having some trouble with Angular 2 forms, I succesfully implemented a few forms in my project and when I try to add this one, i get and error from my Angular Cli: Type 'FormGroup' is not assignable to type 'typeof FormGroup'.

Anyone met with this ?

Here is my component code:

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],
  })
}

And here is the html form code:

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

Solution

  • I guess you messed up = with :.

    Change your myAdressForm definition to this:

    export class AddressBookComponent {
    
       myAddressForm : FormGroup;
       ...
    }
    

    The way you typed it (myAdressForm = FormGroup), will assign the property myAdressForm to the class type of FormGroup