So I'm trying to pass what i input in form and pass it to my dialog button how to do that I get only the

Here is what i did.

openDialogSerialLot(index: number){
  let dialogRef = this.dialog.open(AddSerialLotComponent, {data:{Name:''}, {Address:''}})
  
  dialogRef.afterClosed().subscribe(result => {
    console.log(result)
  })
}


 constructor(@Inject(MAT_DIALOG_DATA) public data:any,private fb:FormBuilder) { }

  ngOnInit(): void {
    this.Form= this.fb.group({
      Name: [''],
      Address: [''],
    })
    this.Form.get('Name').setValue(this.data)
    this.Form.get('Address').setValue(this.data)
  }
}

CodePudding user response：

Please pass the quantity in an object with a property name as quantity.

parent

  openAlertDialog(index: number) {
    console.log(this.fg.value.Info);
    const dialogRef = this.dialog.open(AlertDialogComponent, {
      data: {
        quantity: this.fg.value.Info[index].qty,
      },
    });
    dialogRef.afterClosed().subscribe((result) => {
      const showButton = result.symbol;
      (this.fg.get('Info') as FormArray)
        .at(index)
        .get('showButton')
        ?.patchValue(showButton);
    });
  }

child

import { Component, OnInit, Inject } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-alert-dialog',
  templateUrl: './alert-dialog.component.html',
})
export class AlertDialogComponent implements OnInit {
  message: string = '';
  cancelButtonText = 'Cancel';
  displayedColumns = ['symbol'];
  dataValues;
  testGroup: FormGroup = new FormGroup({
    qty: new FormControl(['']),
  });

  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<AlertDialogComponent>
  ) {
    this.dataValues = data;
    this.dialogRef.updateSize('300vw', '300vw');
  }

  ngOnInit() {
    this.testGroup.patchValue({
      qty: this.dataValues.quantity,
    });
  }
}

child html

<form [formGroup]="testGroup">
  <mat-form-field >
    <mat-label>Qty</mat-label>
    <input matInput type="number" formControlName="qty" />
  </mat-form-field>
</form>

stackblitz

CodePudding user response：

Base on what you just posted, you are sending Name and Address as empty strings, also, I think the structure of your data is not what you wanted

I believe what you want to achieve is the following:

@Component({...})
export class SomeComponent {
 openDialogSerialLot(index: number): void {
  const theData = { Name: 'some random name', Address: 'an address' };
  this.dialog
    .open(AddSerialLotComponent, theData)
    .afterClosed().subscribe(result => {
        console.log(result)
    });
  }
}

AddSerialLotComponent

@Component({...})
export class AddSerialLotComponent implements OnInit {

  constructor(
   @Inject(MAT_DIALOG_DATA) public data: { Name: string; Address: string },
   private dialogRef: MatDialogRef<AddSerialLotComponent> // you need to inject this for sending back the data you want
   private fb:FormBuilder
  ) { }

  ngOnInit(): void {
    this.Form= this.fb.group({
        Name: [''],
        Address: [''],
    });

    this.Form.get('Name').setValue(this.data.Name) //'some random name' value
    this.Form.get('Address').setValue(this.data.Address)// 'an address' value
  }
}

Then, somewhere in your AddSerialLotComponent, when you close the dialog, you should send back what you need and listen for that response in your .afterClosed function

onSubmit(): void {
  this.dialogRef.close(this.Form.value); // { Name: '...', Address: '...' }
}