反应形式的嵌套相关下拉列表问题

Question

我设置了带有2个依赖下拉列表的嵌套反应形式。当我选择First DD时，第二个下拉列表的值取决于第一个选定的DD项目。当我选择第二个DD时，将在输入框显示中添加一个数字（即9、1、3）。

我使用formArray在这3个字段（2个DD和1个输入）中添加了“添加更多”。

我的问题是： 1）当我选择第一个DD而不是第二个，然后在输入字段中添加一个数字。 2）单击“添加更多”按钮，然后选择第一个DD，而不是上面的选择。请参见下面的代码。

<form [formGroup]="orderForm" (ngSubmit)="onSubmit(orderForm)">
    <div>
    <div formArrayName="orders" *ngFor="let order of orderForm.get('orders').controls; let k = index;">
        <div [formGroupName]="k">
            <select formControlName="pName" (change)="onChangePName($event.target.value)">
                <option value="">-Select Name-</option>
                <option value="{{ids.iotId}}" *ngFor="let ids of itemsList">{{ids.iot_name}}</option>
            </select>

            <select formControlName="phoneName" (change)="onChangePhone($event.target.value)">
                <option value="">-Select Name-</option>
                <option value="hrd.hardwareId" *ngFor="let hrd of hrdList">{{hrd.hrdName}}</option>
            </select>
            <div *ngIf="itemCountShow">
            <input formControlName="itemCount" placeholder="Item count">
            </div>
        </div>
    </div>
</div>
    <div class="row margin-top-10 pull-right">
        <div class="col-md-12">
          <div class="col-md-12">
            <button type="button" (click)="addOrderItems()" class="btn btn-secondry btn-sm">Add More Orders</button>
          </div>
        </div>
      </div>
</div>
</form>

组件代码：

import { Validators, FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { UserdataService } from '../service/userdata.service';

export class HomeComponent implements OnInit {
itemCountShow = false;
  public orderLists: any;
  itemsList: any;
  public selectedItem: any;
  orderForm: FormGroup;
  items: FormArray;
  orders: FormArray;

constructor(private formBuilder: FormBuilder, public companyService: UserdataService) { 

  }

ngOnInit() {
    this.getIOTvendorListForAddCustomer();
    this.orderForm = this.formBuilder.group({
    orders: this.formBuilder.array([ this.createOrderItem()])
  });
  }

  //function to get all IOT vendor List
  getIOTvendorListForAddCustomer(){
      this.companyService.getIOTvendorListForAddCustomer()
      .subscribe(res=>{
          this.itemsList = res['items'];
          console.log(this.itemsList)
      })
  }

  addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

createItem(): FormGroup {
  return this.formBuilder.group({
    pname: '',
    description: '',
    price: ''
  });
}

createOrderItem(): FormGroup{
  return this.formBuilder.group({
    phoneName: ['', Validators.required],
    pName: ['', Validators.required],
    itemCount: ['', Validators.required],
  })
}

onChangePName(selectedValue){
   this.companyService.getIOTHardwareList(selectedValue)
    .subscribe(res=>{
        this.itemCountShow = false;
        if(res && res['items']){
            this.hrdList = res['items']
        }else{
            this.hrdList = [];
        }
    }) 
}  

onChangePhone(selectedValue){
  this.itemCountShow = true;
  console.log(selectedValue)
}  

addOrderItems(){
  this.orders = this.orderForm.get('orders') as FormArray;
  this.orders.push(this.createOrderItem());
}