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(

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()">

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">

Please help me debug this. I use Angular 6

Thanks

1 Answer
1

use formGroupName="myFormNameDrop"

formGroupName="myFormNameDrop"

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


FormControl:

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


myDrop:'era'

should be

can be simplified as

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.