Question

我有一个反应性表格，字段名称为-> 状态（类型-下拉列表），城市（类型-裁剪） 复选框，用于添加定价定价框（类型-复选框）

添加按钮

这些字段都会附加
问题是每个附加表单字段组的来源都来自州和城市字段数据来源

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

我正在共享我的代码https://stackblitz.com/edit/angular-kf2jqr

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(){

     }

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>

在控制反应式表单数组方面面临的问题

0 个答案: