角度：错误：formGroup 需要一个 FormGroup 实例。无法读取未定义的属性“get”

debugcn 发表于 Dev

布伦达

在这里使用 Angular 6。我有如下设置：

AppComponent 有一个 Child0Component。

Child0Component 有一个按钮，它打开一个模式加载 Child1Component。

最后， Child1Component 有一个 Dropdown 和 Grid(table) 数据。

虽然这个流程工作正常，没有问题。

现在我将 AppComponent 包裹在一个表单周围，并将所有实例传递给子组件并添加表单控件名称等。但是当我单击我的模态时，它加载 Child1component 并在控制台中抛出一个错误：

ERROR
Error: Cannot read property 'get' of undefined

ERROR
Error: formGroup expects a FormGroup instance. Please pass one in.

以下是我的相关代码：

  <form class="form-horizontal" novalidate [formGroup]="dataForm">
    <div class="row">     
      <child0-app  [dataForm]="dataForm"></child0-app>     
    </div>    
</form>

下面是我的 Child1Component 选择，我认为它会引发错误，因为如果我对此发表评论，它可以正常工作：

 <div class="form-group" [formGroup]="dataForm" >
          <label class="col-sm-1 control-label">Type:</label>
          <select class="form-control input-medium" name="type" formControlName="type"  (change)="onChangeType();">
            <option value=''>-- Select Type --</option>
            <option [ngValue]="d.Id" *ngFor="let d of types">
              {{d.Name}}
            </option>
          </select>
          </div>

我添加了表单控件来进行一些验证等，因为我的组件中会有更多控件。

不确定这里缺少什么，因为我遵循了一些教程，我相信确实正确地创建了它。

我还创建了一个演示如下：

演示：https : //angular-modal-form-control.stackblitz.io

编辑：https : //stackblitz.com/edit/angular-modal-form-control

- 更新 -

AppComponent TS
 public dataForm: FormGroup;  

  ngOnInit () { 
     this.dataForm = this.fb.group({});
  }

Child1Component TS

@Input() dataForm: FormGroup;

哈立德·萨米尔

你先有两个问题

你需要像这样初始化你的表单控件

this.dataForm = this.fb.group({ type: new FormControl() });
您需要使用，*ngIf因为您正在传递表单跨组件<div class="form-group" [formGroup]="dataForm" *ngIf="dataForm" >以确保表单在组件从其父级接收 dataForm 对象之前不是初始的。

更新示例stackblitz

更新的工作示例：

工作示例

好的，你的想法，你按照这个步骤

在中创建表单 app.component
传递给你 child0.component
然后点击触发事件 (click)="openModal()"
您创建引导模式然后将数据传递给该模式
从后端获取数据然后打开模态并从服务器传递数据
缺少将表单数据对象传递dataForm给创建的模态。

现在你的开放模态方法应该这样做

openModal() {
this.appService.getAllData().subscribe((data: any[]) => {     

 const initialState = {
  data: data,
  ignoreBackdropClick: true,
  animated: true,
  keyboard: true,
  dataForm: this.dataForm,
  class: 'moal'
};

    this.modalRef = 
    this.modalService.show(Child1Component,{initialState});
});

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。