Reputation: 121
So i've been looking through internet and everyone says the same thing and that is i have to add imports in appmodule.ts but i've added imports and i still have the same error.
The error is:
Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("
<ion-col>
<form novalidate [ERROR ->][FormGroup]="form" (ngSubmit)="addUser(form)">
<ion-title class="center">Registr"): ng:///AppModule/RegisterPage.html@8:33
Register.html (https://ghostbin.com/paste/8wn3q)
Register.ts (https://ghostbin.com/paste/3sxcz)
Appmodule.ts (https://ghostbin.com/paste/wgmxd)
Upvotes: 2
Views: 7669
Reputation: 472
It looks like you're using Ionic4? You also need to import FormsModule
and ReactiveFormsModule
into your <page-name>.module.ts
and then add them to the imports
array.
Upvotes: 7
Reputation: 311
Also another common culprit when you face this issue is lazy loading. If you are lazy loading don't forget to include the relevant imports(in this case ReactiveFormsModule) in current module not just in the parent module.
Upvotes: 4
Reputation: 16412
Looks like you confused two ways of Angular forms usage - you should use directive in template, and class instance in component file:
Use directive in templates, it should be camelCase, as described here: https://angular.io/guide/reactive-forms#step-2-associating-the-formgroup-model-and-view
<form [formGroup]="yourFormName">
CONTENT
</form>
Use constructor in components, it should start from UpperCase letter (as any class name), as described here: https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance
export class YourComponent {
public yourFormName: FormGroup = new FormGroup({
firstControl: new FormControl(''),
lastControl: new FormControl(''),
});
}
Upvotes: 1