Click here to Skip to main content
15,888,065 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
HTML
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:
JavaScript
import {NgForm, FormGroup,FormControl,Validators, FormBuilder} from '@angular/forms';

export class Customer{
    CustomerCode:string = "";
    CustomerName:string = "";
    CustomerAmount:number = 0;
    CustomerFormGroup: FormGroup = null;

    Constructor()
    {
           //creating formgroup object
   
       var CustomerFormBuilder =  new FormBuilder;
       this.CustomerFormGroup = CustomerFormBuilder.group({});
        //adding form control
        //having just one validation
        //adding name control
        this.CustomerFormGroup.addControl("CustomerNameControl", new FormControl('',Validators.required) )

        //having more than one validations
        //creating array
        var CustomerCodeValidations = []
        CustomerCodeValidations.push(Validators.required)
        CustomerCodeValidations.push(Validators.pattern('^[0-9]{4,4}'))
        // adding code control
        this.CustomerFormGroup.addControl("CustomerCodeControl", new FormControl('',Validators.compose(CustomerCodeValidations)) )
    }
}

Customer component code:
JavaScript
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();// clear UI
  }
}


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.
Posted
Updated 11-Oct-19 5:13am
v2
Comments
Member 14619566 11-Oct-19 23:32pm    
That is not working for me

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900