Angular 自举模型内的反应子形式组

我有一个反应式表单，它的一部分在

ngFor

内，因此每当我点击

ngFor

内的按钮时，我需要弹出一个模式并显示模式内的一些字段

我的父组件：

order create.component.ts

export class OrderCreateComponent {

    @ViewChild(AlterationComponent) alteration: AlterationComponent;

    constructor(private fb: FormBuilder) {}

    createForm() {

    this.orderForm = this.fb.group({
      customer_name: ['', Validators.required],
      customer_badge: ['', Validators.required],      
      items: this.fb.array([ ])
    });

    let items = this.orderForm.get('items') as FormArray;

    this.suit_items.forEach(obj => {
      items.push(this.createItemForm(obj));
    });

  }

  createItemForm(obj): FormGroup {

    return this.fb.group({
      suit_item_id: [obj.id, Validators.required],
      alteration: this.fb.group({
        length: ''
      })
    });

  }
   openAlterationModal(item) {
    this.alteration.openModal(item.get('alteration'));
  }

}

@Component ({
  selector: 'app-alteration',
  templateUrl: 'alteration.html'
})

export class AlterationComponent {
  alterationForm: FormGroup;
  openModal(alteration: FormGroup) {
    this.alterationForm = alteration;
  }

}

create order.html

<form [formGroup]="orderForm" (submit)="onSubmit()">
......
<div *ngFor="let item of orderForm.get('items').controls; let i = index;"">
    ......
    <button (click)="openAlterationModal(item)">open modal</button>
</div>
 <app-alteration></app-alteration>
</form>

.....
<div [formGroup]="alterationForm" *ngIf="alterationForm">
    <input type="text" class="form-control" id="length" name="length" placeholder="length" formControlName="length" required>
</div>
.....

alternation.html

<form [formGroup]="orderForm" (submit)="onSubmit()">
......
<div *ngFor="let item of orderForm.get('items').controls; let i = index;"">
    ......
    <button (click)="openAlterationModal(item)">open modal</button>
</div>
 <app-alteration></app-alteration>
</form>

.....
<div [formGroup]="alterationForm" *ngIf="alterationForm">
    <input type="text" class="form-control" id="length" name="length" placeholder="length" formControlName="length" required>
</div>
.....

。。。。。
.....

我的问题是modal=>alternation.html中的formgroup没有显示，但我可以在

alternation.component.ts

openmodel函数中控制台该表单组

---

我不知道我做这件事的方式是否正确。我是个新手。我该怎么办

你能为我们添加一个stackblitz来复制这个问题吗？这不是强制性的，但如果你能做到这一点，它会有很大帮助。创建了具有最低要求的stackblitz，但它正在工作。stack blitz是否按照你的要求工作？这就是你的意思吗？