Невозможно определить группу формы в реактивной угловой форме

Question

Я пытаюсь создать formGroup внутри реактивной формы. Это включает в себя некоторые поля, которые я хотел бы наблюдать за обоими изменениями. Я делаю то, что говорит официальное руководство 1002 *, и все равно получаю ошибки.

Это мой код

      <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>

Как определить форму в компоненте

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

Тогда я бы хотел сделать что-то вроде

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

Но я получаю следующую ошибку

`Ошибка ОШИБКИ: formGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один.

   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)`

о этой строке <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">

Пожалуйста, помогите мне отладить это. Я использую Angular 6

Спасибо

Answer 1

использование formGroupName="myFormNameDrop"

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

FormControl:

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