I am new to angular And I am trying to learn form validations. Please find my script below:
Customer is one of the modules in the app.
Customer HTML code:
<form [formGroup]="CustomerModel.CustomerFormGroup">
Customer Code :<input formControlName = "CustomerCodeControl" [(ngModel)]="CustomerModel.CustomerCode"
type=text/><br>
Customer Name :<input formControlName = "CustomerNameControl" [(ngModel)]="CustomerModel.CustomerName"
type=text/><br>
Customer Amount :<input [(ngModel)]="CustomerModel.CustomerAmount" [ngModelOptions]="{standalone: true}"
type=text/><br>
<input (click)="Add()" type=button value="Add"/><br>
</form>
Customer model code:
import {NgForm, FormGroup,FormControl,Validators, FormBuilder} from '@angular/forms';
export class Customer{
CustomerCode:string = "";
CustomerName:string = "";
CustomerAmount:number = 0;
CustomerFormGroup: FormGroup = null;
Constructor()
{
var CustomerFormBuilder = new FormBuilder;
this.CustomerFormGroup = CustomerFormBuilder.group({});
this.CustomerFormGroup.addControl("CustomerNameControl", new FormControl('',Validators.required) )
var CustomerCodeValidations = []
CustomerCodeValidations.push(Validators.required)
CustomerCodeValidations.push(Validators.pattern('^[0-9]{4,4}'))
this.CustomerFormGroup.addControl("CustomerCodeControl", new FormControl('',Validators.compose(CustomerCodeValidations)) )
}
}
Customer component code:
import { Component } from '@angular/core';
import {Customer} from "./CustomerApp.model"
@Component({
templateUrl: './CustomerApp.CustomerView.html'
})
export class CustomerComponent {
title = 'CustomerApplication';
CustomerModel : Customer = new Customer();
CustomerModels :Array<customer> = new Array<customer>();
Add(){
this.CustomerModels.push(this.CustomerModel);
this.CustomerModel = new Customer();
}
}
In the component module, I imported both FormsModule and ReactiveFormsModule. However
I am getting the following error:
Error: formGroup expects a FormGroup instance. Please pass one in.
What I have tried:
I tried to check if it's because small case/upper case mismatch. I am unable to trace the code further as I am new to programming. Please help.