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

所以，这个弹出窗口打开，我可以在textArea中写入任何数据，但不幸的是，单击Submit按钮弹出窗口并没有关闭，我在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>

---

下面是用最简单的方法实现的正确方法

这里的关键是捕获有关更改的数据：

html：

html 2

剧本

---

您可能需要查看controlValueAccessor，以确保formControl中的值被传递到弹出窗口并绑定。您可以创建一个stackblitz示例，说明您正在尝试执行的操作吗？@JudsonTerrell请查看给定链接中的第一个示例。因此，您想创建一个带有绑定到原始表单的文本区域的对话框吗？那么当其关闭或提交时，表单将保留该值？是。。我现在需要Dailog框，它应该关闭并传递给TS文件。您能重复一下吗？我在问，在弹出式屏幕中，我们能按要求输入字段吗？这里是一个更新的答案。你知道答案吗

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

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

}