访问表单 ElementRef 的“form”属性显示 TypeScript 错误

Question

我的模板中有这个表格：

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

我将其添加为控制器中的 ViewChild：

@ViewChild('heroForm') heroForm: ElementRef;

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

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;
}