Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 953
MatWaligora Avatar asked Jul 18 '16 13:07

MatWaligora


People also ask

How do you initialize a FormGroup?

Using FormGroup Next, you need to create an instance of FormGroup with the instances of FormControl : productForm = new FormGroup({ reference: new FormControl(), quantity: new FormControl('11') }); You can provide a default value for the control, by passing it as an argument to the FormControl .

Can't bind to FormGroup since it isn't a known property of?

What Does This Error Mean? Angular is trying to tell us that it doesn't know about the formGroup directive on the <form> element in your component. This usually happens when the wrong forms module is imported, the right module is imported in the wrong place or the ReactiveFormsModule is just not imported at all.

How do I change FormGroup values?

We use the SetValue to update the FormControl , FormGroup or FormArray . When we use it to update the FormGroup or FormArray the SetValue requires that the object must match the structure of the FormGroup or FormArray exactly. Otherwise, it will result in an error.


1 Answers

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

like image 121
Poul Kruijt Avatar answered Oct 14 '22 12:10

Poul Kruijt