Angular 12 Mat-Dialog中Form Group值为空问题求助

你的代码里存在一个拼写错误，导致表单控件没有和FormGroup正确绑定，所以无法获取输入值：

• HTML中input标签的属性写错了：formControName 少了一个字母l，正确的属性名是 formControlName

修正后的HTML代码 #

<form [formGroup]="addNewDeductionForm">
   <mat-dialog-content fxLayoutGap="2%">
     <mat-form-field >
      <mat-label>Starting balance</mat-label>
      <input formControlName="startingBalance"> <!-- 已修正拼写错误 -->
     </mat-form-field>
   </mat-dialog-content>
   <mat-dialog-actions align="end">
    <button mat-raised-button mat-dialog-close (click)="AddDeduction()">Add Deduction</button>
   </mat-dialog-actions>
</form>

额外检查项 #

确保组件所属的模块已经导入了必要的表单和Material模块，否则表单指令无法生效：

import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    // ...其他模块
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule
  ],
  declarations: [DialogDeductionsComponent]
})
export class YourModule { }

修正后再次点击按钮，addNewDeductionForm.value就能正确获取到输入框的内容了。

内容的提问来源于stack exchange，提问作者Lio Liov