javascript - 错误:成员“feedbackFormDirective”隐含的角度为“任何”类型
问题描述
我的项目期间出现错误。我找不到任何解决方案,我正在使用 angular 12 版本。
我的 .ts 文件
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Feedback, ContactType } from '../shared/feedback';
...
export class ContactComponent implements OnInit {
feedbackForm!: FormGroup;
feedback!: Feedback;
contactType = ContactType;
@ViewChild('fform') feedbackFormDirective;
constructor(private fb: FormBuilder) {
this.createForm();
}
ngOnInit(): void {
}
onSubmit() {
this.feedback = this.feedbackForm.value;
console.log(this.feedback);
this.feedbackForm.reset({
firstname: '',
lastname: '',
telnum: '',
email: '',
agree: false,
contacttype: 'None',
message: '',
});
this.feedbackFormDirective.resetForm();
}
}
我的 .html 文件
...
<form novalidate [formGroup]="feedbackForm" #fform="ngForm" (ngSubmit)="onSubmit()">
<p>
<mat-form-field class="half-width">
<input matInput formControlName="firstname" placeholder="First Name" type="text" required>
<mat-error *ngIf="feedbackForm.get('firstname').hasError('required') && feedbackForm.get('firstname').touched">First name is required</mat-error>
</mat-form-field>
<mat-form-field class="half-width">
<input matInput formControlName="lastname" placeholder="Last Name" type="text" required>
<mat-error *ngIf="feedbackForm.get('lastname').hasError('required') && feedbackForm.get('lastname').touched">Last name is required</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field class="half-width">
<input matInput formControlName="telnum" placeholder="Tel. Number" type="tel" required>
<mat-error *ngIf="feedbackForm.get('telnum').hasError('required') && feedbackForm.get('telnum').touched">Tel. number is required</mat-error>
</mat-form-field>
<mat-form-field class="half-width">
<input matInput formControlName="email" placeholder="Email" type="email" required>
<mat-error *ngIf="feedbackForm.get('email').hasError('required') && feedbackForm.get('email').touched">Email ID is required</mat-error>
</mat-form-field>
</p>
<table class="form-size">
<td>
<mat-slide-toggle formControlName="agree">May we contact you?</mat-slide-toggle>
</td>
<td>
<mat-select placeholder="How?" formControlName="contacttype">
<mat-option *ngFor="let ctype of contactType" [value]="ctype">
{{ ctype }}
</mat-option>
</mat-select>
</td>
</table>
<p>
<mat-form-field class="full-width">
<textarea matInput formControlName="message" placeholder="Your Feedback" rows=12></textarea>
</mat-form-field>
</p>
<button type="submit" mat-button class="background-primary text-floral-white" [disabled]="feedbackForm.invalid">Submit</button>
</form>
</div></div>
错误是这样的:
Object is possibly 'null'.
48 <mat-error *ngIf="feedbackForm.get('firstname').hasError('required') && feedbackForm.get('firstname').touched">First name is required</mat-error>
~~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:48:113 - error TS2531: Object is possibly 'null'.
48 <mat-error *ngIf="feedbackForm.get('firstname').hasError('required') && feedbackForm.get('firstname').touched">First name is required</mat-error>
~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:52:58 - error TS2531: Object is possibly 'null'.
52 <mat-error *ngIf="feedbackForm.get('lastname').hasError('required') && feedbackForm.get('lastname').touched">Last name is required</mat-error>
~~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:52:111 - error TS2531: Object is possibly 'null'.
52 <mat-error *ngIf="feedbackForm.get('lastname').hasError('required') && feedbackForm.get('lastname').touched">Last name is required</mat-error>
~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:58:56 - error TS2531: Object is possibly 'null'.
58 <mat-error *ngIf="feedbackForm.get('telnum').hasError('required') && feedbackForm.get('telnum').touched">Tel. number is required</mat-error>
~~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:58:107 - error TS2531: Object is possibly 'null'.
58 <mat-error *ngIf="feedbackForm.get('telnum').hasError('required') && feedbackForm.get('telnum').touched">Tel. number is required</mat-error>
~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:62:55 - error TS2531: Object is possibly 'null'.
62 <mat-error *ngIf="feedbackForm.get('email').hasError('required') && feedbackForm.get('email').touched">Email ID is required</mat-error>
~~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.html:62:105 - error TS2531: Object is possibly 'null'.
62 <mat-error *ngIf="feedbackForm.get('email').hasError('required') && feedbackForm.get('email').touched">Email ID is required</mat-error>
~~~~~~~
src/app/contact/contact.component.ts:7:16
7 templateUrl: './contact.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ContactComponent.
Error: src/app/contact/contact.component.ts:15:23 - error TS7008: Member 'feedbackFormDirective' implicitly has an 'any' type.
15 @ViewChild('fform') feedbackFormDirective;
~~~~~~~~~~~~~~~~~~~~~
解决方案
为了避免隐含的任何类型错误,您应该为您的表单显式设置一个类型。
import {NgForm} from '@angular/forms';
...
@ViewChild('fform') feedbackFormDirective: NgForm;
推荐阅读
- mongodb - 如何使用 Micronaut 和 Kotlin + KMongo 为 MongoDB 配置对象映射?
- python - 有没有办法按给定数据集中某个值的百分比窗口对数据行进行分组,然后遍历数据集?
- groovy - 在 NiFi 中捕获上一个处理器的名称
- c# - 如何加速 LINQ WHERE?
- html - 目录菜单栏
- android - ProcessException:无法初始化类 com.android.tools.analytics.UsageTracker
- django - 如何使用 DRF 序列化程序创建包含所需 OneToOneField 的 Django 模型实例
- c++ - 执行说明
- character - 试图计算输入的“a”的数量
- ios - 使用 Twilio SDK 进行屏幕共享和摄像头流