Javascript 具有子组件的被动形式

如您所见，我有一个父窗体组件和一个子组件。 {myformdard.value}显示

昵称

值和

名称

值，但不显示

年龄

值。 {{myFormFather.status}它无法识别组件子级。就像我的孩子是个幽灵，为什么

我的表格父亲.html

<form [formGroup]="myFormFather" (ngSubmit)="onSubmit()">
    <input formControlName="nickName">
    <input formControlName="name">
    <my-form-child
            [age]="myFormFather">
    </my-form-child>
    <button type="submit"
            [disabled]="myFormFather.invalid">Save
    </button>
</form>

<div [formGroup]="ageForm">
    <input formControlName="age">
</div>

我的表单child.html

<form [formGroup]="myFormFather" (ngSubmit)="onSubmit()">
    <input formControlName="nickName">
    <input formControlName="name">
    <my-form-child
            [age]="myFormFather">
    </my-form-child>
    <button type="submit"
            [disabled]="myFormFather.invalid">Save
    </button>
</form>

<div [formGroup]="ageForm">
    <input formControlName="age">
</div>

您好，您一直在寻找的解决方案

演示

问题是：您重写了从父级传递的表单组

---

在您的子组件中，

[age]=“myFormFather”

输入在哪里？如果您在子组件中创建两次新的FormGroup，您期望得到什么？非常感谢！它起作用了！非常感谢你的stackblitz@赫克托，这是我的荣幸。太好了。但当涉及编辑时，我如何从父亲那里设置孩子信息？非常有用！谢谢

@Input() ageForm = new FormGroup({
  age: new FormControl()
});

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.createForm()
}

createForm() {
  // This is overwriting the FormGroup passed from parent!
  this.ageForm = this.fb.group({
    age: ['', [Validators.required]]
  });

  // Instead you had to use
  // this.ageForm.addControl("age", new FormControl('', Validators.required));
}