javascript - Passing multiple values from dialog in Angular 8 - Stack Overflow

admin管理员组

文章数量:1316681

I have created a dialog using Material Design for Angular. In the original example there was only one field, which was bound with one parameter in parent view. I want to create a dialog, that gathers more than just one parameter and return these parameters back to the parent ponent, so I can post it to my API.

How it looks now:

<h1 mat-dialog-title>Create</h1>
<div mat-dialog-content>
  <p>Fill in a new pany name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.name">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="data.name" cdkFocusInitial>Ok</button>
</div>

What I want to achieve:

<h1 mat-dialog-title>Create</h1>
    <div mat-dialog-content>
      <p>Fill in a new person name</p>
      <mat-form-field>
        <input matInput [(ngModel)]="data.name">
        <input matInput [(ngModel)]="data.surname">
        <input matInput [(ngModel)]="data.email">
        <input matInput [(ngModel)]="data.mobile">
        ...
      </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()">Cancel</button>
      <button mat-button [mat-dialog-close]="WHAT DO I ENTER HERE?" cdkFocusInitial>Ok</button>
    </div>

When I removed the [mat-dialog-close] property, the data never came back to the ponent and couldn't be sent to API. Could you advise on how do I pass back these multiple values?

I have created a dialog using Material Design for Angular. In the original example there was only one field, which was bound with one parameter in parent view. I want to create a dialog, that gathers more than just one parameter and return these parameters back to the parent ponent, so I can post it to my API.

How it looks now:

<h1 mat-dialog-title>Create</h1>
<div mat-dialog-content>
  <p>Fill in a new pany name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.name">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="data.name" cdkFocusInitial>Ok</button>
</div>

What I want to achieve:

<h1 mat-dialog-title>Create</h1>
    <div mat-dialog-content>
      <p>Fill in a new person name</p>
      <mat-form-field>
        <input matInput [(ngModel)]="data.name">
        <input matInput [(ngModel)]="data.surname">
        <input matInput [(ngModel)]="data.email">
        <input matInput [(ngModel)]="data.mobile">
        ...
      </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()">Cancel</button>
      <button mat-button [mat-dialog-close]="WHAT DO I ENTER HERE?" cdkFocusInitial>Ok</button>
    </div>

When I removed the [mat-dialog-close] property, the data never came back to the ponent and couldn't be sent to API. Could you advise on how do I pass back these multiple values?

• javascript
• angular
• typescript
• angular-material

Share Improve this question Follow edited Jan 25, 2020 at 13:40 Roy 8,08955 gold badges2828 silver badges4848 bronze badges asked Jan 25, 2020 at 11:45 Marek TywoniakMarek Tywoniak 4311 gold badge11 silver badge77 bronze badges 1

• 2 [mat-dialog-close]="data" – Roberto Zvjerković Commented Jan 25, 2020 at 11:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The only thing you have to do is to send the data from the child (modal in this case) to the parent is to pass [mat-dialog-close]="data" in the button, The parent can take care of the values sent via the data object, if the values are correctly assigned.

  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>

and

data: {name: this.name, role: this.role}

See this StackBlitz for an example. Both values you added are being printed in the console and passed into the parent's ponent passedValues object, which is printed in the HTML file.

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  console.log('All the data', result);
  this.passedValues = result;
});

Imagine you have such case, in referring ponent you can easily use as you wanted

    openDialog() {
        this.dialog.open(AddChargesComponent, {
          data: { name: this.name, surname:this.surname, email: this.email, mobile: this.mobile} 
        }).afterClosed().subscribe(response => {
          console.log(response.name,response.surname, response.email, response.mobile )
        })
      }

In addition to Roy's answer, you can pass a subset of the data like this:

  <button mat-button [mat-dialog-close]="{name: data.name, email: data.email}" cdkFocusInitial>Ok</button>

本文标签： javascriptPassing multiple values from dialog in Angular 8Stack Overflow