javascript - 访问表单 ElementRef 的 "form"属性显示 TypeScript 错误

Question

我的模板中有此表单:

<form #heroForm="ngForm" (ngSubmit)="onSubmit()">

我将其添加为 Controller 中的 ViewChild:

@ViewChild('heroForm') heroForm: ElementRef;

当我访问它的“form”属性以查看它是否有效时，它显示 TypeScript 错误““ElementRef”类型上不存在属性“form”。 ”。

if(this.heroForm.form.valid){
  this.submitted = true;
}

如何消除这个错误？

Stackblitz 示例:https://stackblitz.com/edit/template-driven-form-demo-1tbb37?file=app%2Fuser-form%2Fuser-form.component.ts

Answer 1

只需导入 ngForm 指令

import {NgForm} from '@angular/forms';

更改您的表单声明

@ViewChild('heroForm', { read: NgForm }) heroForm: any;

更改表单验证条件

if(this.heroForm.valid){
    this.submitted = true;
}