Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 - Can't bind to 'ngFormOptions' since it isn't a known property of 'form'

We just recently updated our application Angular version to v5 and as part of new update Forms support ngFormOptions to configure the validations for form elements on certain events. Below is what we have done:

<form class="example-form" autocomplete="off" [ngFormOptions]="{updateOn:'submit'}" [formGroup]="testform">

</form>

But it's throwing below error

Can't bind to 'ngFormOptions' since it isn't a known property of 'form'

Below the dependencies for the application after update.

package.json

"dependencies": {
    "@angular/animations": "5.0.0-rc.5",
    "@angular/common": "5.0.0-rc.5",
    "@angular/compiler": "5.0.0-rc.5",
    "@angular/core": "5.0.0-rc.5",
    "@angular/forms": "5.0.0-rc.5",
    "@angular/http": "5.0.0-rc.5",
    "@angular/platform-browser": "5.0.0-rc.5",
    "@angular/platform-browser-dynamic": "5.0.0-rc.5",
    "@angular/router": "5.0.0-rc.5",
    "core-js": "^2.4.1",
    "ng2-accordion": "0.0.15",
    "ngx-bootstrap": "^1.9.3",
    "ngx-popover": "0.0.16",
    "rxjs": "^5.5.2",
    "typescript": "2.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "^1.5.4",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2"
}

What else are we missing here? Why we still get this error even after the proper update?

like image 809
Guruprasad J Rao Avatar asked Dec 07 '17 06:12

Guruprasad J Rao


People also ask

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

If you don't import the right Angular form module in the right place, your code will fail to compile and you'll see Can't bind to 'formGroup' since it isn't a known property of 'form' in your terminal. Let's take a look at why this error shows up and how you can fix it and get your app working again.

Can't bind to formGroup since it isn't a known property of form ionic 5?

In order to solve can't bind to 'formgroup' since it isn't a known property of 'form' error you need to import ReactiveFormsModule in each submodule file.


1 Answers

As @Andriy mentioned in his comments

ngForms selector is selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]' - source . Thus, using formGroup directive on form will make this form as NOT ngForm and ngFormOptions will have no affect in this case.

Alternatively, we can use the said options in `component file as below:

this.testform = new FormGroup({
      testcontrol: new FormControl('', Validators.required)
}, {updateOn: 'submit'});
like image 174
Guruprasad J Rao Avatar answered Sep 27 '22 19:09

Guruprasad J Rao