Angular 从对话框模板提交表单

我试图从对话框提交表单，但

form.value

为

null

。我不知道少了什么。。我提供了一些代码和作为您的参考

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>

---

请尝试以下链接：

我发现您的表单输入格式有效。请浏览以下链接一次：

在submit button remove matDialogClose属性中，将其保持为simple button，并在提交数据时检查表单的有效状态以及您希望应用于输入的所有其他验证，如果所有验证都正确，则关闭对话框，否则显示错误

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

(ngSubmit)="onSend(userForm)"

---

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

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

从'@angular/core'导入{Component，Input，TemplateRef，Injectable，ViewChild}；
从“@angular/material”导入{MatDialog，MatDialogRef，MAT_DIALOG_数据，MatFormFieldControl}；
从'@angular/forms'导入{FormControl，NgForm，Validators，FormBuilder，FormGroup}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
供应商：[
{提供：MatFormFieldControl，使用现有：AppComponent}
]
})
导出类AppComponent{
@ViewChild（'callAPIDialog'）callAPIDialog:TemplateRef；
@ViewChild（'userForm'）userForm:any；
dialogRef：任何；
userModel:any={}；
//名称='角度'；
构造函数（公共对话框：MatDialog）{
}
openDialog（）{
this.dialogRef=this.dialog.open（this.callapialdialog）；
this.dialogRef.afterClosed（）.subscribe（结果=>{
console.log（this.userForm）；
如果（结果！==未定义）{
如果（结果！=“否”）{
const enabled=“Y”
控制台日志（结果）；
}否则，如果（结果==‘否’）{
console.log（'User clicked no'）；
}
}
})
}
onSend（表格：NgForm）{
让数据=form.value；
console.log（“提交的表单”）；
log（this.userModel）；
this.dialogRef.close（）；
}
}

挑一个
添加组织
取消
提交

正如我看到的，您在控制台中有许多错误，请先尝试解决这些错误OK谢谢。我会解决的我正在努力解决它请看看我的方法可能会对你有帮助

(ngSubmit)="onSend(userForm)"