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>
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 .
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With