bootstrap模式中的反应子表单组

Question

我有一个反应形式，其中一个部分在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'));
  }

}

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>

alteration.component.ts

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

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

}

alteration.html

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

我的问题是我的modal =＆gt;中的formgroup未显示，但我可以在我的alteration.component.ts openModal函数中控制该表单组。

我不知道我是否正确地做到了。我是棱角分明的新手。我该怎么办。