为什么表单：FormGroup 在 Angular11 组件中显示“控件”未定义？答案

【问题标题】：Why is form: FormGroup showing 'controls' as undefined in an Angular11 component?为什么表单：FormGroup 在 Angular11 组件中显示“控件”未定义？
【发布时间】：2021-08-07 06:34:18
【问题描述】：

我是 Angular 11 和 TypeScript 的新手。我正在尝试访问明确定义的“FormGroup”变量中的“控件”属性。它一直告诉我属性未定义...

send(form: FormGroup): void{
    let jsonModel = {
      materialNum: form.controls['materialNum'].value,
    };

    let jsonModelRaw: string = JSON.stringify(jsonModel);
    //...
}

我声明了以下内容：

import { FormBuilder, FormControl, FormGroup, NgForm, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';

组件的 HTML：

  <mat-vertical-stepper [linear]="isLinear" #stepper>
    <mat-step [completed]="stepOneDone" [stepControl]="newMaterialFormGroup">
      <form [formGroup]="newMaterialFormGroup"
            name="newMaterialForm"
            #newMaterialForm="ngForm"
            (ngSubmit)="send(newMaterialFormGroup.value)">
        <ng-template matStepLabel>Fill out new material form</ng-template>
        <mat-form-field>
          <mat-label>Material #</mat-label>
          <input matInput placeholder="Material ID" formControlName="MaterialNum" required>
        </mat-form-field>

【问题讨论】：

请包含与您的 TS 代码相关的 HTML 模板 - 这可能是绑定问题。
@miqh 刚刚添加了重要的部分，我正在使用步进器，我想我知道它为什么不起作用。我发送的是 value 而不是实际的 formGroup 对象！

标签： angular typescript angular11

【解决方案1】：

感谢@miqh 让我意识到这个错误。在 HTML 中，我将 FormGroup 的值作为参数而不是对象本身传递。所以，从技术上讲，我是在传递原始 JSON。

所以这块(ngSubmit)="send(newMaterialFormGroup.value)">应该改成 (ngSubmit)="send(newMaterialFormGroup)">

这样做会传递对象，从而允许我成功访问controls。

但问题仍然存在……如果我明确声明参数的类型为 FormGroup 并且我启用了强类型，为什么 TS 没有检测到这一点。

【讨论】：