Home:ALL Converter>Cannot define a form group in a reactive angular form

Cannot define a form group in a reactive angular form

Ask Time:2018-08-29T06:46:24         Author:codebot

Json Formatter

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

Author:codebot,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/52067170/cannot-define-a-form-group-in-a-reactive-angular-form
yy