如果在Angular 12中使用mat-dialog表单组时,您遇到了表单的值为空的问题,可以尝试以下几种方法来解决它:
方法1:手动注册表单控件
在弹出窗口组件的构造函数中注入了FormBuilder,但是出现了表单控件的值为空的问题。这可能是由于您没有手动注册表单控件所致。在您的弹出窗口组件中手动注册表单控件通常可以解决这个问题。
示例代码:
export class MyDialogComponent implements OnInit { form: FormGroup;
constructor(
private fb: FormBuilder,
private dialogRef: MatDialogRef
ngOnInit() { this.form = this.fb.group({ name: [''], email: [''], message: [''], }); }
save() { this.dialogRef.close(this.form.value); } }
方法2:手动设置表单的初始值
如果您已经手动注册了表单控件,但表单的值仍为空,则可以尝试手动设置表单的初始值。表单的初始值应该设置为您从服务端获取的数据。
示例代码:
export class MyDialogComponent implements OnInit { form: FormGroup; data: any;
constructor(
private fb: FormBuilder,
private dialogRef: MatDialogRef
ngOnInit() { this.form = this.fb.group({ name: [this.data.name || ''], email: [this.data.email || ''], message: [this.data.message || ''], }); }
save() { this.dialogRef.close(this.form.value); } }
以上是解决Angular 12中mat-dialog表单组的值为空的两种方法。如果您仍然遇到问题,请确保您的代码正确,或者尝试给表单控件添加一些初始值