angular - 从 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)"