CODEWITHSUNDEEP
angularangular6angular-reactive-forms
codebot
codebot

Reputation: 707

Cannot define a form group in a reactive angular form

I am trying to create a formGroup inside a reactive form. This includes some fields that I would like to observe both for any changes. I am doing what the official guide says and I still get errors.

This is my code 

      <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
        <div [formGroup]="myFormNameDrop">
            <label>
                <input type="text" formControlName="myName" required >
              </label>
              <label>
                  <select name="myDrop" selected formControlName="myDrop" (change)="myDropChanged($event)">
                    <option value="era" >era</option>                      
                    <option value="plate">plate</option>
                  </select>
              </label>
            </div><!-- myFormNameDrop-->

       <!-- more dropdowns -->
       <button type="submit">Submit</button>
      </form>

How I define the form in the component 

  myForm = this.formBuilder.group({
    myFormNameDrop: this.formBuilder.group({
      myName:['',Validators.required],
      myDrop:['era']
    }),    
    day:[''],
    type:[''],
    style:[''],
    userId:[this.user_id]
  });

Then I would like to do something like

this.data = this.myForm.myFormNameDrop.valueChanges.pipe(

But I get the following error

`ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

   Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});
at Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.missingFormException (forms.js:994)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._checkFormPresent (forms.js:4382)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (forms.js:4292)
at checkAndUpdateDirectiveInline (core.js:8935)
at checkAndUpdateNodeInline (core.js:10203)
at checkAndUpdateNode (core.js:10165)
at debugCheckAndUpdateNode (core.js:10798)
at debugCheckDirectivesFn (core.js:10758)
at Object.eval [as updateDirectives] (MapcmsComponent.html:106)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10750)`

tha is about this line <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">

Please help me debug this. I use Angular 6

Thanks

Upvotes: 1

Views: 2687

Answers (1)

Haifeng Zhang
Haifeng Zhang

Reputation: 31905

use formGroupName="myFormNameDrop"

 <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
   <div formGroupName="myFormNameDrop">
   </div>
 </form>

FormControl:

 myDrop:['era'] can be simplified as  myDrop:'era'

Upvotes: 2

Related Questions