将数据从 mat 对话框传递回组件

Question

因此，此弹出窗口打开，我可以在 textArea 中写入任何数据，但不幸的是，单击“提交”按钮弹出窗口未关闭，我没有在 ts 文件中获取值。如果我在弹出框之外单击，我会在 TS 中得到未定义的值。

我需要解决这个问题。1. 为什么TextArea数据没有转入TS文件？2. 在文本区域和单击按钮中写入任何数据后，弹出窗口必须关闭，以防止用户单击屏幕的其他部分。

我的 ts 代码是：

if(cnfrm){
let dialogRef = this.dialog.open(this.callAPIDialog)
  dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`); // which will be value
})
}

我的html代码是：

 <ng-template #callAPIDialog> 
    <textarea #name matInput placeholder="Leave a comment" formControlName="description" required></textarea> 
    <button type="button" (click)="dialogRef.close(name.value)">Submit</button> 
  </ng-template>

Answer 1

这是以最简单的方式实现的正确方法。

https://stackblitz.com/edit/angular-ott6js-hpfsuv?embed=1&file=src/app/dialog-overview-example.ts

这里的关键是捕获变化数据：

html：

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <mat-label>Favorite Animal</mat-label>
    <input matInput (change)="changeAnimal($event)">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

html 2

<form [formGroup]="myForm">
<ol>
  <li>
    <mat-form-field>
      <mat-label>What's your name?</mat-label>
      <input matInput formControlName="name">
    </mat-form-field>
  </li>
  <li>
    <button mat-raised-button (click)="openDialog()">Pick one</button>
  </li>
  <li *ngIf="1==1">
    You chose: <i>{{myForm.controls.animal.value}}</i>
  </li>
</ol>
</form>

剧本

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

export interface DialogData {
  animal: string;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample implements OnInit {
  myForm: FormGroup;
  animal: string;
  name: string;

  constructor(public dialog: MatDialog, private formBuilder: FormBuilder) {}

  ngOnInit(){
    this.myForm = this.formBuilder.group({
      name: new FormControl(null),
      animal: new FormControl(null)
    })
  }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      disableClose: true, // this prevents clicking outside
      width: '250px',
      data: this.myForm.value
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed', result);
      // this.myForm.setControl('animal', result);
      this.myForm.controls.animal.setValue(result);
    });
  }

}



//The dialog component. We are using ngValue accessor to get the values.
@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
  animal: string;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
    changeAnimal(ev: any) {
      this.data.animal = ev.target.value;
    }

}