从 Angular 对话框模板提交表单答案

【问题标题】：Submit form from Angular Dialog Template从 Angular 对话框模板提交表单
【发布时间】：2020-04-23 02:39:17
【问题描述】：

我正在尝试从对话框提交表单，但 form.value 是 null。我不知道缺少什么。我提供了一些代码和DEMO 作为您的参考。

HTML

<div>
<button mat-raised-button (click)="openDialog()">Pick one</button>
</div>

  <ng-template #callAPIDialog>
        <form #userForm="ngForm" (ngSubmit)="onSend(form.value)">
        <h2 matDialogTitle>Add Organization</h2>
        <mat-form-field>
            <input matInput [(ngModel)]="organisationName" placeholder="Your organization" [ngModelOptions]="{standalone: true}">
            <input matInput [(ngModel)]="enabled" [(value)]="Y" [ngModelOptions]="{standalone: true}">
          </mat-form-field>
        <mat-dialog-actions align="end">
            <button mat-button matDialogClose="no">Cancel</button>
            <button type="submit" mat-button matDialogClose="yes">Submit</button>
        </mat-dialog-actions>
    </form>
    </ng-template>

组件

openDialog() {
    let dialogRef = this.dialog.open(this.callAPIDialog);
    dialogRef.afterClosed().subscribe(result => {
        if (result !== undefined) {
            if (result !== 'no') {
              const enabled = "Y"
                console.log(result);
            } else if (result === 'no') {
               console.log('User clicked no.');
            }
        }
    })
}


onSend(form: NgForm){
  let data = form.value;
  console.log(data);
}

【问题讨论】：

我可以看到你在控制台有很多错误首先尝试解决它们
好的，谢谢。我会解决的
好的，我正在努力解决它
请看看我的方法可能对你有帮助

标签： angular typescript angular-material

【解决方案1】：

请尝试以下链接：https://stackblitz.com/edit/ang-material-dialog-rxufmu

我发现您的表单输入格式有效。请通过以下链接一次： https://dzone.com/articles/template-driven-forms-in-angular
在提交按钮中删除 matDialogClose 属性使其保持为简单按钮，并在提交数据时检查表单有效状态和所有其他验证，如果所有验证都正确，则关闭对话框否则显示错误
在 ngSubmit 中传递整个表单而不是值，这样您就可以跟踪表单状态和其他属性，这样做
```
(ngSubmit)="onSend(userForm)"
```

【讨论】：

【解决方案2】：

这是获取表单值的方法。您也可以在提交表单后关闭 matdialog。只需在 app.component.ts 文件中进行一些更改

我在类级别创建了 dialogRef 变量，您可以在 onSend 方法中访问它以关闭对话框。

import { Component,Input, TemplateRef, Injectable, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatFormFieldControl } from '@angular/material';
import { FormControl, NgForm, Validators,  FormBuilder, FormGroup  } from '@angular/forms';



@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: MatFormFieldControl, useExisting: AppComponent}   
  ]
})
export class AppComponent {
  @ViewChild('callAPIDialog') callAPIDialog: TemplateRef<any>; 
  @ViewChild('userForm') userForm: any;
  dialogRef: any;
  userModel: any = {};
  //name = 'Angular';
  
  constructor(public dialog: MatDialog) {
  
   }

  openDialog() {

    this.dialogRef = this.dialog.open(this.callAPIDialog);
    this.dialogRef.afterClosed().subscribe(result => {
        console.log(this.userForm);
        if (result !== undefined) {
            if (result !== 'no') {
              const enabled = "Y"
                console.log(result);
            } else if (result === 'no') {
               console.log('User clicked no.');
            }
        }
    })
}


onSend(form: NgForm){
  let data = form.value;
  console.log('form submitted');
  console.log(this.userModel);
  this.dialogRef.close();
}

}

<div>
<button mat-raised-button (click)="openDialog()">Pick one</button>
</div>

  <ng-template #callAPIDialog>
        <form #userForm="ngForm" (ngSubmit)="onSend(userForm)">
        <h2 matDialogTitle>Add Organization</h2>
       
            <input   [(ngModel)]="userModel.organisationName" placeholder="Your organization" name="organisationName" [ngModelOptions]="{standalone: true}">
            <input matInput [(ngModel)]="userModel.enabled" [(value)]="Y" name="enabled" [ngModelOptions]="{standalone: true}">
          
        <mat-dialog-actions align="end">
            <button mat-button matDialogClose="no">Cancel</button>
            <!-- <button type="submit" mat-button matDialogClose="yes">Submit</button> -->
              <button type="submit" mat-button>Submit</button>
        </mat-dialog-actions>
    </form>
 
    </ng-template>

【讨论】：