When I am trying to formGroup validators, I am seeing following error in conosle. I have tried all the options, but no luck. I have followed following links for the same as well:
https://github.com/akveo/ngx-admin/issues/281
https://stackoverflow.com/questions/46324125/uncaught-error-template-parse-errors-cant-bind-to-formgroup-since-it-isnt
Error Log:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
<div class="tab-pane active" id="pd">
<form [ERROR ->][formGroup]="form" (ngSubmit)="saveRegd(form.value)">
apologies if this query already answered and I am also sorry for long thread.
Any response is highly appreciated.
System details:
Angular/cli: 1.2.3
node: 9.11.0
os: win32 ia32
angular/animations: 4.4.6
angular/common: 4.3.1
angular/core: 4.3.1
angular/http: 4.3.1
angular/compiler: 4.3.1
angular/forms: 4.3.1
angular/platform-browser: 4.3.1
angular/platform-browser-dynamic: 4.3.1
angular/router: 4.3.1
angular/cli: 1.2.3
angular/compiler-cli: 4.3.1
angular/language-service: 4.3.1
PS: I am very new to AngularJS, started a month back in this project.
Thank you once again!
-----registerpatient.component.ts------------------------
`import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
import { NgModule } from '@angular/core';
@component({
selector: 'app-registerpatient',
templateUrl: './registerpatient.component.html',
styleUrls: ['./registerpatient.component.scss'],
encapsulation: ViewEncapsulation.None
})
@NgModule({
declarations: [
//HeaderComponent
],
imports: [
ReactiveFormsModule,
FormsModule,
FormControl,
FormGroup,
FormBuilder,
Validators
],
providers: [],
exports: [
FormsModule,
ReactiveFormsModule
],
})
export class RegisterpatientComponent implements OnInit {
public form: FormGroup;
constructor(public formBuilder: FormBuilder) { }
ngOnInit() {
let lastName = new FormControl('', Validators.required);
// let second = new FormControl('', CustomValidators.notEqualTo(lastName));
this.form = this.formBuilder.group({
required: ['', Validators.required],
lastName: lastName,
// second: second,
})
}
public saveRegd(value: any) {
console.log(value);
}
}`
----------------------registerpatient.component.html-----
`<form [formGroup]="form" (ngSubmit)="saveRegd(form.value)">
<p>PATIENT DETAILS</p>
<div class="card-block widget-body">
<div class="row">
<div class="form-group col-lg-3 col-sm-6 col-12">
<div class="form-group">
<input type="text" class="form-control" id="patunqno" placeholder="Patient Unique Number">
</div>
</div>
.
.
.
<div class="form-group col-lg-3 col-sm-6 col-12 ">
<input type="text" class="form-control validation-field" name="lname" placeholder="Last Name" formControlName="lastName">
<small class="text-danger" *ngIf="form.controls.required.touched && form.controls.required.errors?.required">Last Name is required</small>
</div>
..
..
..
<button type="submit" class="btn btn-sm btn-primary" [disabled]="form.invalid">Save
---------------------(main)appmodule.ts----------------------
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { CalendarModule } from 'angular-calendar';
import { NgProgressModule } from 'ngx-progressbar';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { routing } from './app.routing';
import { AppSettings } from './app.settings';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './pages/errors/not-found/not-found.component';
import { HeaderComponent } from './theme/components/header/header.component';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
import { GlobalState, HttpWrapperService } from './core';
import { AuthenticationInterceptor, AuthenticationStore, AuthenticationGuard } from './authentication'
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { AsyncLocalStorageModule } from 'angular-async-local-storage';
//Broadcaster
import { Broadcaster } from './broadcast/broadcaster';
import { ModelviewComponent } from './theme/components/modelview/modelview.component';
// Application wide providers
const APP_PROVIDERS = [
AppSettings,
GlobalState,
AuthenticationStore,
HttpWrapperService,
AuthenticationInterceptor,
AuthenticationGuard,
Broadcaster
];
@NgModule({
declarations: [
AppComponent,
NotFoundComponent,
//HeaderComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
ReactiveFormsModule, FormsModule,
LoadingBarHttpClientModule,
AsyncLocalStorageModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyDe_oVpi9eRSN99G4o6TwVjJbFBNr58NxE'
}),
CalendarModule.forRoot(),
routing,
],
providers: [APP_PROVIDERS,
[{
provide: HTTP_INTERCEPTORS, useClass:
AuthenticationInterceptor, multi: true
}]],
bootstrap: [ AppComponent ]
})
export class AppModule { }
`