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?
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.
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.
As @Andriy mentioned in his comments
ngForms
selector isselector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]'
- source . Thus, usingformGroup
directive onform
will make thisform
as NOTngForm
andngFormOptions
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'});
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