Angular 在获得对无功formarray的控制方面面临的问题

我有一个字段名为-> 状态（类型-下拉列表）， 城市（类型-克罗普敦） 用于添加定价的复选框 Pricng框（键入-复选框）

每次单击添加按钮时，这些字段都会追加

问题是每个附加表单字段组的州和市字段数据来源相同

• 当我选择一个状态字段时，具有相同控件的其他附加表单字段将受到影响

我正在分享我的代码

ts文件

PackageDetails : FormGroup;
  Countrystate = ['J&K' , 'Punjab' , 'Bihar'];
  ountrycity = ['Srinager' , 'Chandigarh' , 'Patna'];


   constructor( public fb: FormBuilder){ 
   this.PackageDetails = this.fb.group({
    Package_budget : this.fb.array([this.addPayment()]),
    });
   }


   addPayment(): FormGroup {
          return this.fb.group({
          city : [''],
          state : [''],
          custumCosting : [''],
          checktoaddPayemt : ['']
        });
      }

   add(): void {
          console.log(this.PackageDetails.get('Package_budget')['controls']);
          console.log((<FormArray>this.PackageDetails.get('Package_budget')));
          (<FormArray>this.PackageDetails.get('Package_budget')).push(this.addPayment());
     }   

     onSubmit(){

     }

PackageDetails:FormGroup；
Countrystate=['J&K'，'Punjab'，'Bihar']；
CountryCity=['Srinager'，'Chandigarh'，'Patna']；
构造函数（公共fb:FormBuilder）{
this.PackageDetails=this.fb.group({
包_预算：this.fb.array（[this.addPayment（）]），
});
}
addPayment（）：FormGroup{
返回此.fb.group({
城市：['']，
国家：['']，
客户成本：['']，
支票支付方式：['']
});
}
add（）：void{
log（this.PackageDetails.get（'Package_budget'）['controls']）；
log（（this.PackageDetails.get（'Package_budget'））；
（this.PackageDetails.get（'Package_budget'））.push（this.addPayment（））；
}   
onSubmit（）{
}

html

<form [formGroup]='PackageDetails' (ngSubmit)="onSubmit()">

<div formArrayName="Package_budget"
          *ngFor="let skill of PackageDetails.get('Package_budget').controls; let i = index">
          <div [formGroupName]="i">

            <div class='block-inline'> <label [for]="'packag_type'+i"> State </label>
              <select formControlName="state" [id]="'packag_type'+i" (change)='getpackListName()' autocomplete>
                <option *ngFor="let item of Countrystate" [ngValue]="item" >{{item}}
                </option>
              </select>
            </div>

            <div *ngIf='packageList.length > 0' class='block-inline'>
              <label [for]="'package_list_id'+i"> City</label>
              <select formControlName="city"  autocomplete [id]="'package_list_id'+i" (change)='getPackageDetails(1)'>
                <option *ngFor="let item of ountrycity" [ngValue]="item">{{item}}</option>
              </select>
            </div>

            <div class='block-inline' class='block-inline' *ngIf='manulaPayBox'>
              <label [for]="'custumCosting'+i"> </label>
              <select>
                <option value='item' *ngFor="let item of currency"> {{item}} </option>
              </select>
              <input type='text' formControlName="custumCosting" [id]="'custumCosting'+i" appOnlyNumber="true">
            </div>

            <div *ngIf="packageList.length > 0" class='block-inline'>
              <!-- <checkbox class="example-margin" formControlName="checktoaddPayemt" [id]="'checktoaddPayemt'+i"
                [labelPosition]="labelPosition" (change)='paymentManual($event)'>
                {{texttoaddPayemt}}
              </checkbox> -->
              <input type="checkbox"(change)='paymentManual($event)'> {{texttoaddPayemt}}<br>
            </div>
          </div>



        </div>

        <div>
          <button (click)="add()">add</button>
        </div>

       </form> 

陈述
{{item}}
城市
{{item}}
{{item}}
{{texttoaddpaymt}}

添加

这应该会有帮助you@Ravi谢谢，您能告诉我您做了哪些更改吗？添加了未实现的方法，修复了html中未定义的长度，并添加了“提交”按钮来检查表单数据。