app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppRoutes} from './app.routing';
import { AppComponent } from './app.component';
import {ReactiveFormsModule,FormsModule} from "@angular/forms";
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot(AppRoutes),
BrowserModule
],
declarations: [
AppComponent,
],
providers: [
customHttpProvider(),
AccessService,
RouteAccessService,
JwtHelperService
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
issue encountered:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'.
HTML snippet causing the error
<form [formGroup]="multi1Form">
<div class="app-modal-header" data-backdrop="static" data-keyboard="false">
<h4 class="modal-title">Modal 1</h4>
<button type="button" class="close basic-close" (click)="modalMulti1.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="app-modal-body" data-backdrop="static" data-keyboard="false">
<div class="row">
<div class="col-sm-12">
<h4 class="sub-title">First Name</h4>
<!-- <form> -->
<div class="form-group row">
<div class="col-sm-12">
<input class="form-control form-control-md" formControlName="fname" [(ngModel)]="item.fname" placeholder="First name" type="text">
</div>
</div>
<!-- </form> -->
</div>
<div class="col-sm-12">
<h4 class="sub-title">Last Name</h4>
<!-- <form> -->
<div class="form-group row">
<div class="col-sm-12">
<input class="form-control form-control-md" formControlName="lname" [(ngModel)]="item.lname" placeholder="Last name" type="text">
</div>
</div>
<!-- </form> -->
</div>
</div>
</div>
<div class="app-modal-footer">
<button type="button" class="btn btn-default waves-effect " (click)="modalMulti1.hide()">Close</button>
<button data-toggle="modal" [disabled]='!multi1Form.valid' (click)="modalMulti2.show(); modalMulti1.hide();" class="btn btn-primary waves-effect waves-light">Next</button>
</div>
</form>
component.ts
import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {ToastData, ToastOptions, ToastyService} from 'ng2-toasty';
import {transition, trigger, style, animate} from '@angular/animations';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import swal from 'sweetalert2';
@Component({
selector: 'app-popup-validation-wizard',
templateUrl: './popup-validation-wizard.component.html',
styleUrls: ['./popup-validation-wizard.component.css',
'../../../../../node_modules/ng2-toasty/style-default.css',
'../../../../../node_modules/ng2-toasty/style-material.css',
'../../../../../node_modules/ng2-toasty/style-bootstrap.css',],
encapsulation: ViewEncapsulation.None,
})
export class PopupValidationWizardComponent implements OnInit {
multi1Form: FormGroup;
constructor() {}
ngOnInit() {
this.checkForm();
}
private checkForm() {
this.multi1Form = new FormGroup({
fname: new FormControl('Asif', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]),
lname: new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]),
});
}
}
I have already imported FormsModule in my app.module.ts file but the error persists in the console. I am unable to navigate to the HTML page where the issue is occurring. Is there a solution for this problem? Alternatively, what other approach can be taken to resolve this issue considering that I am currently using Angular 4 and TypeScript 2.x?