错误：formControlName必须与父formGroup指令一起使用。你'；I’我想添加一个formGroup指令-Angular Responsive forms

我有以下模板。我正在努力掌握反应形式，但遇到了一个问题

名字*

在我的组件中，我有：

@组件({
选择器：“来宾输入”，
templateUrl:'./guest input.component.html'，
})
导出类GuestInputComponent实现OnInit{
@输入（）
嘉宾:嘉宾,；
客人形式：FormGroup；
构造函数（私有_fb:FormBuilder）{}
恩戈尼尼特（）{
this.guestForm=this.\u fb.group({
名字：['test'，[Validators.required，Validators.minLength（3）]]
});
}
}

这一切在我看来都很好，但出于某种原因，我得到了：

错误：未捕获（承诺中）：错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup 指令并向其传递现有的FormGroup实例（您可以在类中创建一个）

---

我想我已经在我的

指令中声明了这一点。如果在带有

FormGroup

指令的表单标记中嵌套了表单标记，请将其删除：

->去掉这个
名字*
->去掉这个

在

modelDrivenForms

中，

[formGroup]=“guestForm”

应位于父元素中

<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
  <label>First Name*  </label>
  <input formControlName="firstname" type="text" class="form-control input-sm">
</div>

名字*

当您在没有formGroup的情况下使用表单控件时

错误代码：

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      formControlName="promotionMaterial"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      formControlName="termsAndConditions"
      (change)="onChange($event)"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

在[错误代码]中，我使用“formControlName”，因此它对我无效。

解决方案：

<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input
      [formControl]="promotionMaterial"
      class="tgl tgl-light tgl-primary"
      id="promotionMaterial"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="promotionMaterial"></label>
  </div>
</li>
<li class="d-flex align-items-center">

  <div class="custom-switch ml-auto">
    <input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
    <label class="tgl-btn m-0" for="offer"></label>
  </div>
</li>
<li class="d-flex align-items-center">
  <div class="custom-switch ml-auto">
    <input
      [formControl]="termsAndConditions"
      class="tgl tgl-light tgl-primary"
      id="termsAndConditions"
      type="checkbox"
    />
    <label class="tgl-btn m-0" for="termsAndConditions"></label>
  </div>
</li>

或

这就是为我工作的那个。我把formGroup嵌套到了deep中。
<div class="col-md-12" formArrayName="educations">
</div>

educations: this.formBuilder.array([]),

<form [formGroup]="manageOrderForm">

</form>

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {

  manageOrderForm: any;
}