Angular-Reactive-Forms，出现错误，无法读取未定义的属性 'get'

Question

我遇到以下错误。尽管我定义了所有内容，但我无法在我的代码中找到任何我未定义的内容。我也在粘贴我的代码，请检查我为什么会出现以下错误。

core.js:14597 ERROR TypeError: Cannot read property 'get' of undefined
    at BaseFormComponent.get [as idNumber] (http://localhost:4200/main.js:3636:44)
    at http://localhost:4200/vendor.js:145383:9
    at Array.forEach (<anonymous>)............

我的html代码：-

 <form class="flex flex-column flex-row-ns flex-wrap mt2" [formGroup]="identificationForm" >
     <mat-form-field class="w-50-ns pr2-ns">
    <mat-label>License Number</mat-label>
    <input matInput placeholder="" formControlName="idNumber"/>
  </mat-form-field>
  <mat-error *ngIf="idNumber.invalid && idNumber.touched">
      {{ titleAlert }}
    </mat-error>

    </form>

我的ts代码：-

export class IdentificationComponent extends BaseFormComponent implements OnInit  {
    identificationForm: FormGroup;
    formBuilder: FormBuilder;
    idType: Array<any>;
    states: Array<any>;
    titleAlert: string = 'This field is required';

    constructor() {
        super();
    }

    ngOnInit() {
        this.initializeForm();

    }

    initializeForm() {
        this.identificationForm = this.formBuilder.group({
            id: ['', [Validators.required]],
            state: ['', [Validators.required]],
            idNumber: ['', [Validators.required]],

        });
    }

    get idNumber() {
        return this.identificationForm.get('idNumber') as FormControl;
    }
    }

Answer 1

会不会是时间问题？你在某个地方绑定到表单上的 idNumber 吗？也许是这样的：

<mat-error *ngIf="idNumber.invalid && idNumber.touched">

绑定可能发生在表单初始化之前。

虽然我只是在我的代码中尝试了类似的东西并且它在我的示例中没有抛出异常（虽然我没有使用 material 设计）。所以它必须是特定于您的场景的东西（因此请求 stackblitz。）

你可以试试这个：

get idNumber() {
    if (this.identificationForm) {
      return this.identificationForm.get('idNumber') as FormControl;
    }
}

Answer 2

两件事：

使用 *ngIf 避免初始错误

<form *ngIf="identificationForm" [formGroup]="identificationForm" >

用identificationForm.controls.idNumber表示"idNumber"

<mat-error *ngIf="identificationForm.controls.idNumber.invalid && 
                  identificationForm.controls.idNumber.touched">

注意：从 Angular 7 开始，您可以参考 myForm.controls.nameOfField - 不需要使用 myForm.get('nameOfField') -

Angular-Reactive-Forms，出现错误，无法读取未定义的属性 'get'

Angular-Reactive-Forms, getting error, Cannot read property 'get' of undefined

angular

angular-reactive-forms

Angular-Reactive-Forms，出现错误，无法读取未定义的 属性 'get'

Angular-Reactive-Forms, getting error, Cannot read property 'get' of undefined

angular

angular-reactive-forms

Angular-Reactive-Forms，出现错误，无法读取未定义的属性 'get'