angular - formGroup 需要一个 FormGroup 实例 : angular 4

Question

我在 Angular 4 中创建了一个 formGroup，其中用户和组织存储在对象中。现在我想使用这两个对象填充我的表单组。 在我的 ts 中，我做了以下事情:

createForm(user: any) {
    this.userForm = this.fb.group({
      name: user.profileData.name,
      email: user.profileData.email,
      phone: user.profileData.mobileNumber,    
      orgForm: this.fb.group({
        name: [ user.organisation.name , [Validators.required]]
      })
    });
}

在我看来，我正在做这样的事情:

<form [formGroup]="userForm" class="user-form" (ngSubmit)="onSubmit()" novalidate>
      <div fxLayout="row">
        <div fxLayout="column" fxFlex="50%">
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput placeholder="User Name" formControlName="name">
            </md-input-container>
          </div>
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput placeholder="User Email" formControlName="email">
            </md-input-container>
          </div>
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput placeholder="User Phone" formControlName="phone">
            </md-input-container>
          </div>
          <div class="form-group">
            <button md-raised-button type="submit" [disabled]="userForm.pristine">Save</button>
          </div>
        </div>
        <div fxLayout="column" fxFlex="50%" formGroupName="orgForm">
          <div class="form-group">
             <md-input-container class="full-width">
              <input mdInput placeholder="Organization Name" formControlName="name">
            </md-input-container> 
          </div>
        </div>
      </div>
    </form>

但我收到以下错误:

formGroup expects a FormGroup instance , please pass one in

有任何输入吗？

Answer 1

如果您没有在组件的构造函数中创建表单，则第一次呈现 View 时 userForm 可能是未定义的，这就是您收到该错误的原因。 将您的表单标签封装成如下内容:

<div *ngIf='userForm'>
</div>

因此只有在设置模型时才会生成表单 View 。