ERROR TypeError: "_co.bankId is undefined" (Angular 7)

Question

我的 angular 应用程序中有一个子项目。在这个子项目中，我想创建一个带有输入字段的表单。如果字段无效（例如必填），这些字段需要验证并且需要选择性地显示错误。好吧，问题是，"formControlName" 属性未定义（查看此线程的标题）。

代码定义如下：

// Component file:
...
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
...

export class ConfigFormComponent implements OnInit {
  orderReport: FormGroup;

  createForm() {
    return this.fb.group({
      bankId: ['', Validators.required],
      ...
    });
  }

  constructor(private fb: FormBuilder) { 
    this.orderReport = this.createForm();
  }
}

和 HTML:

 // View file:
    ...
    <mat-card>
       <form [formGroup]="orderReport">
          <mat-form-field appearance="fill">
             <mat-label>Bank ID</mat-label>
             <input matInput placeholder="Bank ID" formControlName="bankId" required>
             <mat-error *ngIf="bankId.invalid">The field shows an error.</mat-error>
          </mat-form-field>
          ...
       </form>
    </mat-card>

我还在 AppModule 文件中添加了 FormsModule 和 ReactiveFormsModule。有人有想法吗？

我正在使用 Angular 7.3.2 和 Angular Material 7.3.2。

Answer 1

要访问表单控件的验证状态，您需要获取对该表单控件的引用，在您的情况下使用：orderReport.get('bankId')，然后您可以访问invalid.

您的 HTML 代码应该是：

<mat-error *ngIf="orderReport.get('bankId').invalid">The field shows an error.</mat-error>

ERROR TypeError: "_co.bankId is undefined" (Angular 7)

ERROR TypeError: "_co.bankId is undefined" (Angular 7)

angular-material

angular

angular-formbuilder

angular7

angular-material-7