Typescript Angular8:formControlName必须与父formGroup指令一起使用

我的模板-我的模板中不需要任何表单（app multiselect是我们自己的下拉列表）

过滤器
要访问调查，请选择下面的图标：
{{framework.itemName}
等待您审查的数据

错误是：

FrameworksSceneComponent.html:14错误：formControlName必须为 与父formGroup指令一起使用。您将要添加一个 formGroup 指令并向其传递现有的FormGroup实例（您可以在类中创建一个）

示例：
在你们班：
this.myGroup=newformgroup({
名字：newformcontrol（）
});
在Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.controlParentException

（forms.js:1558） 在FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.\u checkParentType （表格js:5979） 在FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.\u setUpControl （表格js:5983） 在FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges （表格js:5905） 在checkAndUpdateDirectiveInline（core.js:19337） 在checkAndUpdateNodeLine（core.js:27597） 在checkAndUpdateNode（core.js:27559） 在debugCheckAndUpdateNode（core.js:28193） 在debugCheckDirectivesFn（core.js:28153） 在Object.eval[作为updateDirectives]（FrameworksSceneComponent.html:14）

---

有人知道我的模板有什么问题吗？我希望有一个子页面包含2个下拉列表，从中选择一些值后，页面上的结果应该会更改（从服务获取数据后）

您应该将表单组定义到模板中。如果模板中不需要表单，为什么要使用formControlName？如果您的父组件中有一个被动表单，那么子组件也必须用作fromcontrol，以避免断开链。要做到这一点，您可以在子组件中使用NG_VALUE_访问器。我想我没有注意到我的应用程序multiselect->中的formControlName，它现在似乎可以正常工作，没有任何错误。。。谢谢@cagcak！

<div class="frameworks frameworks-container">
  <div class="frameworks__header__filters">

    <div class="frameworks__header__filters__row">
      <div class="frameworks__header__filters__row">

        <div
          class="frameworks__header__label frameworks__header__label__top frameworks__header__label__frameworks">
          FILTERS
        </div>
        <div class="frameworks__header__filters__column">

          <div class="frameworks__header__filters__row frameworks__header__filters__row__wrap">
            <app-multiselect
              [id]="'calendar'"
              *ngIf="yearsList"
              formControlName="calendar"
              class="companies-selector"
              [defaultText]="calendarText"
              [data]="yearsList"
              [showSearchFilter]="false"
              [order]="'DESC'"
              [singleSelection]="true"
              [customClass]="'dropdown-center'"
            ></app-multiselect>

            <app-multiselect
              class="companies-selector"
              *ngIf="companies"
              [singleSelection]="true"
              [defaultText]="allCompaniesLabel"
              [data]="companies"
              [customClass]="'dropdown-center__lazy'"
              [lazy]="true"
            ></app-multiselect>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="content">
    <h3>To access a survey, please select an icon below:</h3>

    <div class="framework__icon">
      <div class="item" *ngFor="let framework of allFrameworks">
        <div class="framework-name">
          <p class="framework-name">{{framework.itemName}}</p>
        </div>
        <div class="status">
          <p>Data awaiting your review</p>
        </div>
      </div>
    </div>
  </div>
</div>

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