Question

在此处使用Angular 6。我的设置如下：

AppComponent具有一个Child0Component。

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

最后，Child1Component具有一个下拉列表和一个数据网格（表）。

尽管此流程运行正常，没有问题。

现在，我将AppComponent包裹在窗体周围，并确实将所有实例传递给子组件并添加了formcontrol名称等。但是当我单击模式时，它将加载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;

Answer 1

您有2期首先

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

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

更新示例 stackblitz

更新的工作示例：

working example

确定的想法是，您按照以下步骤操作

在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});
});

}

Answer 2

打开模态时，似乎需要将FOrm引用传递给子组件：

Child0Component：

 this.modalRef = this.modalService.show(Child1Component,
    { initialState: { data , dataForm: this.dataForm}, ignoreBackdropClick: true, animated: true, keyboard: true, class: 'modal' });
});

Answer 3

由于在此Formgroup中，您已经定义了其他控件，例如formControlName =“ type”，因此还需要在TS文件中对其进行定义，如下所示：

 dataForm : FormGroup;
  and in ngOnInit()
    this.dataForm = this.formBuilder.group({
    type: [null, [Validators.required]],
    });

如果您不希望在加载下拉菜单中选择任何值，请将其设置为空

<select formControlName= "type"  class="form-control" (change)="selectOption($event.target.value);">
     <option value= "null" disabled selected>Select XXXX</option>
                      <option [value]="t.name" *ngFor="let t of typeList">
                            {{t.fname}} - {{t.description}}
                      </option>
                </select>

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

3 个答案: