从 Angular 对话框模板提交表单

Question

我正在尝试从对话框提交表单，但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);
}

Answer 1

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

1. 我发现您的表单输入格式有效。 请通过以下链接一次： https : //dzone.com/articles/template-driven-forms-in-angular

2. 在提交按钮中删除 matDialogClose 属性将其保留为简单按钮，并在提交数据时检查表单有效状态和所有其他验证，如果所有其他验证都正确，则关闭对话框否则会显示错误

3. 在 ngSubmit 中传递整个表单而不是值，以便您可以跟踪表单状态和其他属性，也可以这样做

   (ngSubmit)="onSend(userForm)"

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