Mat Dialog AfterClose Angular

userDCZH 0
Viewed 47

I'm trying to create dialog with form array when you save it and after closed all my data will be in my main component my question is? How to pass formarray in mat dialog afterclose and push it to my formarray.

this.deliveryReceiptForm = this.formBuilder.group({
      id : [0],
      transactionStatus: ['DRAFT', Validators.required],
      transactionType : ['', ],
      serialArray: this.formBuilder.array([this.serialNum()])
    })

openDialogSerialLot(index: number){
  console.log(this.deliveryReceiptForm.value.displayArray);
  let dialogRef = this.dialog.open(AddSerialLotComponent, {
    data:{
    }
  })
  
  dialogRef.afterClosed().subscribe(result => {
    // (this.deliveryReceiptForm.get('serialArray')as FormArray).at(index).patchValue(result)
      for (let i = 0; i < result.serialNum; i++) {
        this.serialArray.push(this.serialNum());
      }
      for (let i = 0; i <= result.serialNum; i++) {
        this.serialArray.at(i).patchValue({ qty: result.serialNum });
      }
    });
}

MY MAT-DIALOG

this.serialForm = this.fb.group({
      id: [0],
      itemCode:['', Validators.required],
      qtyReceived:[0, Validators.required],
      displayArray: this.fb.array([this.CreateArray()]),
    });

get displayArray():FormArray{
    return this.serialForm.get('displayArray') as FormArray;
  }
  CreateArray():FormGroup{
    return new FormGroup({
      serialNum: new FormControl('', {validators: [Validators.required]}),
    });
  }

onSave(){
    this.http.post(this.appsetting.baseURL + 'users', this.serialForm.value).subscribe((res) => {
      console.log(res)
    })
    this.dialogRef.close(this.serialForm.value?.displayArray);
    console.log(this.dialogRef)
 }
typescript angular rxjs
1 Answers

My advice is to strongly type your matDialog return, like this :

constructor(
    ...
    private matDialog: MatDialog,
    private matDialogAddSerialLotConfig: MatDialogConfig<matDialogAddSerialLotData>
  ) {
    ...
    this.matDialogAddSerialLotConfig = MatDialogConfigAddSerialLot;
  }

  openDialogSerialLot(index: number){
    console.log(this.deliveryReceiptForm.value.displayArray);
    this.matDialogAddSerialLotConfig.data = {};
    let dialogRef = this.matDialog.open(AddSerialLotComponent, this.matDialogAddSerialLotConfig)
    
    dialogRef.afterClosed().subscribe(result => {
      // (this.deliveryReceiptForm.get('serialArray')as FormArray).at(index).patchValue(result)
        for (let i = 0; i < result.serialNum; i++) {
          this.serialArray.push(this.serialNum());
        }
        for (let i = 0; i <= result.serialNum; i++) {
          this.serialArray.at(i).patchValue({ qty: result.serialNum });
        }
      });
  }

export const MatDialogConfigAddSerialLot: MatDialogConfig<MatDialogSerialLotData> =
  {
    id: 'serialLot-dialog-component',
    ...
  };

export interface MatDialogSerialLotData {
  SerialLot: SerialLot[];
}

So you will be able to debugg easier.

Corvus270
Related