表单数组内的角反应表单数组：无法将元素推入最里面的数组

Question

我不愿意提供任何帮助。

我在角度反应式应用程序中嵌套了表格数组。 我必须在（keyup.enter）事件上推送最里面的数组。

在我的html代码中，我可以看到keyup.enter事件推送的元素，但是当我以json格式打印整个表单时，最里面的数组为空。

请在下面查看我的代码。

谢谢。

TS：

export class AddOutwardChallanComponent implements OnInit {

ngOnInit() {

    this.addOutwardChallanForm = this.fb.group({

      date: ['', Validators.required],
      reference_id: ['', Validators.required],
      client_id: ['', Validators.required],
      items: this.fb.array([this.createItem()]),
      note: ['']
    });

    this.items = this.addOutwardChallanForm.get('items') as FormArray;

    this.clientService.getClientList().subscribe(data=>{
      this.clients = data;
    });

    this.addOutwardChallanForm.get('client_id').valueChanges.subscribe(value=>{
      this.clientgasService.getClientGas(value).subscribe(data=>{
        let test: any = data;
        this.gasList = test;
      });
    });
  }
createItem(): FormGroup{
    return this.fb.group({
      gas_id:['', [Validators.required]],
      capacity_id: ['4', Validators.required],
      company_rate: ['0.00', Validators.required],
      client_rate: ['0.00', Validators.required],
      quantity: ['', Validators.required],
      cylinder_no: '',
      cylinderItems: this.fb.array([])
    });
}

 addCylinderItem(cylinder_no, index){

    var flag = 1;
    const object=((this.items as FormArray).controls[index] as FormGroup ).controls;
    if(this.allCylinderList.length == 0){
      flag = 1;
    }
    for(let i=0; i<this.allCylinderList.length; i++){
      if(this.allCylinderList[i]['cylinder_id'] == cylinder_no){
        this.duplicate = true;
        flag = 0;
        break;
      }else{
        flag = 1;
      }
    }
    const cylinderListObject = (object.cylinderItems as FormArray).controls;
    if(flag == 1){

    if(cylinderListObject.length<object.quantity.value){  
    this.allCylinderList.push({
      cylinder_id: cylinder_no
    })

    cylinderListObject.push(this.fb.group({
      cylinder_id: this.fb.control(cylinder_no, [Validators.required, 
        RxwebValidators.unique({message: 'You must enter a unique value'})])
    }));


    object.cylinder_no.setValue("");
  }
  } 
  }

}

HTML：

<div formArrayName="items">
      <div *ngFor = "let clientGas of addOutwardChallanForm.get('items').controls;  let i = index;" class="form-group">
      <div [formGroupName] = "i">
        <div class="row">
         <div class="col-6">
            <mat-form-field>
                <mat-label>Select Gas</mat-label>
                <mat-select placeholder="Select Gas" (selectionChange)="gasChange(i)"
                required name="gas_id" formControlName="gas_id">
                  <mat-option *ngFor="let gas of gasList" [value]="gas.gas_id">
                    {{gas.name}}
                  </mat-option>
                </mat-select>
                <mat-error>
                    Required</mat-error>
              </mat-form-field>
         </div>
         <div class="col-3">
            <mat-form-field>
              <mat-label>{{company_name}} Rate</mat-label>
              <input matInput placeholder="company_rate" name="company_rate" formControlName="company_rate"> 
            </mat-form-field>
          </div>
          <div class="col-3">
              <mat-form-field>
                <mat-label>Client Rate</mat-label>
                <input matInput placeholder="client_rate" name="client_rate" formControlName="client_rate"> 
              </mat-form-field>
            </div>
      </div>


       <div class="row">
           <div class="col-6">
               <mat-form-field>
                   <mat-label>Quantity</mat-label>
                   <input matInput placeholder="Quantity" name="quantity" formControlName="quantity">
                 </mat-form-field>
           </div>
           <div class="col-6">
               <mat-form-field>
                   <mat-label>Cylinder No</mat-label>
                   <input matInput placeholder="Cylinder No" name="cylinder_no" formControlName="cylinder_no"
                   (keyup.enter) = "addCylinderItem(clientGas.controls.cylinder_no.value, i)">
                   <mat-error>Duplicate Cylinder no not allowed</mat-error>
                 </mat-form-field>
           </div>
         </div>
         <div formArrayName = "cylinderItems">
            <div *ngFor = "let cylinder of clientGas.get('cylinderItems').controls;  let j = index;" class="form-group">
              <div [formGroupName] = j>
                  <div class="col-6">
                      <mat-form-field>
                          <mat-label>Cylinder No</mat-label>
                          <input matInput placeholder="Cylinder No" name="cylinder_id" formControlName="cylinder_id">
                        </mat-form-field>
                  </div>
              </div>
            </div>
           </div>
      </div>

      <div class="row">
        <div><button mat-mini-fab> <mat-icon (click)="addItem()">add</mat-icon></button></div>

        <div *ngIf="addOutwardChallanForm.get('items').length > 1"><button mat-mini-fab>  <mat-icon (click)="deleteLastItem(i)">delete</mat-icon></button></div>
      </div>

      </div>
      </div>