小编Hec*_*tor的帖子

我正在尝试垂直使用 ng-Bootstrap 选项卡。他们举了一个例子，但这不是我需要的，我希望它看起来像我在图中的样子。这个配置可以吗？关于采取什么方向的任何想法？

在此处输入图片说明

如您所见，我有一个带有子组件的父表单组件。{{myFormFather.value}} 显示我的nickName价值和name价值，但不显示age价值。{{myFormFather.status}} 它不识别组件子级。就像我的孩子是一个幻影，为什么？

我的-form-father.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>

my-form-father.ts

myFormFather = new FormGroup({
    nickName: new FormControl(),
    name: new FormControl()
});

constructor(private fb:FormBuilder) {}

ngOnInit() {this.createForm()}

createForm() {
    this.myFormFather = this.fb.group({
        nickName: ['', [Validators.required],
        name: ['', [Validators.required]
    });
}

my-form-child.html

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

my-form-child.ts

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

constructor(private fb:FormBuilder) {}

ngOnInit() {this.createForm()}

createForm() {
    this.ageForm = …