Cannot define a form group in a reactive angular form

Question

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

Haifeng Zhang · Accepted Answer · 2018-08-28 23:01:42Z

2

use formGroupName="myFormNameDrop"

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

FormControl:

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

edited Aug 28, 2018 at 23:01

answered Aug 28, 2018 at 22:49

Haifeng Zhang

32.1k22 gold badges95 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codebot Over a year ago

Thanks. Why it should be myDrop:'era' ? Works fine and I dont get any errors. I will re-check, but all look good now.

Haifeng Zhang Over a year ago

@codebot should be change to can be simplified as :)

Collectives™ on Stack Overflow

Cannot define a form group in a reactive angular form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related