无法绑定到'FormGroup'，因为它不是'form'的已知属性----

Question

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 )

Answer 1

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.

Answer 2

[FormGroup] should be [formGroup] .

Notice the lowercase f .

Answer 3

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.

Answer 4

Looks like you confused two ways of Angular forms usage - you should use directive in template, and class instance in component file:

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

2. 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(''), }); }