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

Question

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?

Answer 1

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'});