angulartemplates/angular-forms-and-validations

😺 We created this #angular forms tutorial to help you learn everything about Angular forms validations in angular apps. These angular forms examples are updated using the best coding practices to build Angular apps with Material Design.

angular-forms-and-validations's Issues

Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'

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 { }
`