我的嵌套 Angular 反应式表单没有从父组件获取 FormGroup

Question

我在 YouTube 上的 AngularConnect 2017 上看到了 Kara Erickson 的 Angular 表单演示。我特别感兴趣的部分是 where she describes nested reactive forms

我已经按照 Kara 描述的那样做了所有事情，但无论我尝试什么，我最终都会得到一个 null parentForm。

我在下面复制了我的代码的简化版本。问题是在 child-form 组件中我得到 null.

// 父组件

@Component({
  selector: 'parent-form',
  styleUrls: ['./parent-form.component.css'],
  template: `
    <form [formGroup]="createAlbumProfileForm" (ngSubmit)="onFormSubmitted($event)">
        <input type="text" placeholder="Something unique to parent form"/>
        <child-form></child-form>
    </form>
  `
})
export class ParentFormComponent implements OnInit {

  parentForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.parentForm = this.formBuilder.group({
      yoloField: this.formBuilder.control('')
    });
  }

// 子组件

@Component({
    selector: 'child-form',
    styleUrls: [ './child-form.component.scss' ],
    viewProviders:[ { provide: ControlContainer, useExisting: FormGroupDirective } ],
    template: `
      <div formGroupName="songName" class="form-group"></div
    `
})
export class ChildFormComponent implements OnInit {
    childForm: FormGroup;

    constructor(private parentForm: FormGroupDirective) {
        this.childForm = parentForm.form; // null
    }
}

Answer 1

这似乎是组件生命周期的问题：在视频中，FormGroup 在 parent 组件的构造函数中进行了初始化，但在您的示例中，您将其初始化为 OnInit。问题是 child 的构造函数在 parent 的 OnInit 之前被调用，这就是为什么你得到 null.

Answer 2

我运行遇到了同样的问题，实际上在构造函数中同时进行两种形式的初始化是行不通的。它确实要么在 ngOnInit 中都有，要么在构造函数中有父初始化，在 ngOnInit.

中有子初始化

那时候最好都放在ngOnInit里面，不然再嵌套一层就不行了

所以：

父组件：

@Component({
  //...
})
export class ParentFormComponent implements OnInit {

  // ...

  ngOnInit() {
    this.parentForm = this.formBuilder.group({});
  }

子组件：

@Component({
    // ...
})
export class ChildFormComponent implements OnInit {
    childForm: FormGroup;

    constructor(private parent: FormGroupDirective) {
    }

    ngOnInit() {
        this.childForm = new FormGroup(/*....*/);
        this.parentForm.form.addControl('childData', this.childForm);
    }
}

我的嵌套 Angular 反应式表单没有从父组件获取 FormGroup

My nested Angular reactive form is not getting the FormGroup from the parent component

nested-forms

angular2-forms

angular

angular-reactive-forms