在 mat-dialog Angular 中傳入輸入

Question

所以我試圖傳遞我在表單中輸入的內容並將其傳遞給我的對話框按鈕如何做到這一點我只得到

這就是我所做的。

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)
  }
}

Answer 1

根據您剛剛發布的內容，您將Name和Address作為空字符串發送，此外，我認為您的data結構不是您想要的

我相信您想要實現的目標如下：

@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)
    });
  }
}

AddSerialLot 組件

@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
  }
}

然后，在AddSerialLotComponent的某個地方，當您關閉對話框時，您應該發回您需要的內容並在.afterClosed function 中收聽該響應

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

Answer 2

請在屬性名稱為quantity的 object 中傳遞數量。

父母

  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);
    });
  }

孩子

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,
    });
  }
}

兒童 html

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

堆棧閃電戰