Angular 在被动表单中创建表单控制组

试图为被动表单创建html，但我总是出错

这是我的表格

 private buildForm(): void {
    this.formOperational = this.formBuilder.group({
      comment: [this.expertOperational.comment],
      workingDays: new FormArray([])
    });
  }

  private createWorkignDays(): void {
    this.operational.workingDay.forEach((day: WorkingDay) => {
      this.workHoursControls.push(
        this.formBuilder.group({
          weekDay: [day],
          operationalAM: this.formBuilder.group({
            fixed: [day.operationalAM.fixed],
            startTime: [day.operationalAM.startTime],
            endTime: [day.operationalAM.endTime]
          }),
          operationalPM: this.formBuilder.group({
            fixed: [day.operationalAM.fixed],
            startTime: [day.operationalAM.startTime],
            endTime: [day.operationalAM.endTime]
          })
        })
      );
    });
  }

当我使用HTML时，我会尝试这样的东西

<form [formGroup]="formOperational">
    <div class="row pb-1" *ngFor="let day of formOperational.get('workingDays').controls; let i = index;">
        <div class="col-lg-2 col-sm-2 col-md-2 justify-content-center align-self-center">
            {{'Shared.WeekDay.' + day.weekDay | translate }}
        </div>
        <div class="row" [formGroup]="i">
            <div class="text-center col">
                <input type="checkbox" formControlName="fixed">
            </div>
        </div>
        <div class="col">
            <input class="form-control text-center width-70" formControlName="startTime" />
        </div>
        <div class="col">
            <input class="form-control text-center width-70" formControlName="endTime" />
        </div>
    </div>
    <div class="form-group">
        <textarea class="form-control rounded-0" formControlName="comment"
            rows="11">{{expertOperational.comment}}</textarea>
    </div>
</form>

{{'Shared.WeekDay.+day.WeekDay | translate}
{{expertOperational.comment}

我出错了

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:1443)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._checkFormPresent (forms.js:5414)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (forms.js:5237)
    at checkAndUpdateDirectiveInline (core.js:22095)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)
    at Object.eval [as updateDirectives] (ExpertOperationalComponent.html:6)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)

错误：formGroup需要一个formGroup实例。请把一个传进来。
例子：
在你们班：
this.myGroup=newformgroup({
名字：newformcontrol（）
});
在Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.missingFormException（forms.js:1443）
在FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.\u checkFormPresent（forms.js:5414）
在FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges（forms.js:5237）
在checkAndUpdateDirectiveInline（core.js:22095）
在checkAndUpdateNodeLine（core.js:23363）
在checkAndUpdateNode（core.js:23325）
在debugCheckAndUpdateNode（core.js:23959）
在debugCheckDirectivesFn（core.js:23919）
at Object.eval[作为updateDirectives]（ExpertOperationalComponent.html:6）
在Object.debugUpdateDirectives[作为updateDirectives]（core.js:23911）

有人知道我哪里做错了吗？

---

谢谢你说你的HTML不好。您是否面临错误？ 尝试此操作
删除

*ngFor="let day of formOperational.get('workingDays').controls; let i = index;"

添加
设置一个getter

get controls() {
  return (this.formOperational.get('workingDays') as FormArray).controls;
}

然后在模板中

*ngFor="let day of controls; let i = index"

---

您应该声明一个FormGroup，如

formOperational:FormGroup。在您的
comont.ts
中尝试以下操作：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup} from '@angular/forms';


@Component({
  selector: 'app-example',
  templateUrl: './app-example.component.html',
  styleUrls: ['./app-example.component.scss']
})

export class AppExampleComponent implements OnInit {

  formOperational: FormGroup;

    constructor(
    private _formBuilder: FormBuilder,
  ) {}

}


您在哪里调用了buildForm函数（）？您何时创建FormsOn ngInit，但我认为问题是我没有绑定正确的html，我不知道如何绑定？Put*ngIf=“formOperational”则只有在formI上存在时才会绑定我认为我的html不好：(