Click here to Skip to main content
14,361,180 members
Rate this:
Please Sign up or sign in to vote.
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.
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()
    {
           //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:
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 6: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, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100