How to use Angular2 Material dialog input values

Question

The sample app for Angular2 Material has a dialog that returns a string value which is the message the user has written. But what if I want to prompt the user for more information than just a message?

In other words, I can't figure out how to make a form that behaves like a dialog when using Angular2 Material.

This is the sample app I'm referreing to: https://github.com/jelbourn/material2-app

In https://github.com/jelbourn/material2-app/blob/master/src/app/app.component.ts:

@Component({
  template: `
    <p>This is a dialog</p>
    <p>
      <label>
        This is a text box inside of a dialog.
        <input #dialogInput>
      </label>
    </p>
    <p> <button md-button **(click)="dialogRef.close(dialogInput.value)">CLOSE</button> </p>**
  `,
})
export class DialogContent {
constructor(@Optional() public dialogRef: MdDialogRef<DialogContent>) { }

As you can see,is the dialogRef.close(dialogInput.value) only taking one value. So how to create input that takes more values?

Answer 1

Theoretically this should work. One way to achieve is by declaring a modal/variable in your DialogContent class

lastDialogResult: any; //not string anymore

export class DialogContent {
constructor( @ Optional()public dialogRef: MdDialogRef <DialogContent> ) {
    public MultiInput: any; //your modal here   
  }
}
// inputs are now binded to multiInput Modal. You could have many and different modals..
@Component({
  template: `
    <p>This is a dialog</p>
    <p>
      <label>
        This is a text box inside of a dialog.
        <input [(ngModel)]="multiInput.Input1"> 
        <input [(ngModel)]="multiInput.Input2">
        <input [(ngModel)]="multiInput.Input3">
      </label>
    </p>
    <p> <button md-button (click)="dialogRef.close(multiInput)">CLOSE</button> </p>
  `,
})



dialogRef.afterClosed().subscribe(result => {
    console.log(result.Input1);
    console.log(result.Input2);
    console.log(result.Input3);
    this.lastDialogResult = result; // your existing setup
})

There is always a better way out there, this is just one of it. Let us know your findings.