Error: Member 'feedbackFormDirective' implicitly has an 'any' type in angular
Error: Member 'feedbackFormDirective' implicitly has an 'any' type in angular
我在项目中遇到了错误。我找不到任何解决方案,因为我正在使用 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;
您是否尝试过使用 ?
运算符?
<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>
由于您正在使用其 name
、
访问特定的 formControl
例如:form?.get('noneExistentControl').value
Angular 想要避免访问 possible null object
,这就是为什么使用 ?
可选链接 运算符安全地检查是否值无效或有效。
它说 'object is possibly null'。如果你加一个 '?'在“feedbackForm.get('lastname')”对象和如下更改之后,您将摆脱这个和其他人。
<mat-error *ngIf="feedbackForm.get('lastname')?.hasError('required') &&
feedbackForm.get('lastname')?.touched">Last Name is required</mat-error>
有一个好的代码。
我在项目中遇到了错误。我找不到任何解决方案,因为我正在使用 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;
您是否尝试过使用 ?
运算符?
<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>
由于您正在使用其 name
、
formControl
例如:form?.get('noneExistentControl').value
Angular 想要避免访问 possible null object
,这就是为什么使用 ?
可选链接 运算符安全地检查是否值无效或有效。
它说 'object is possibly null'。如果你加一个 '?'在“feedbackForm.get('lastname')”对象和如下更改之后,您将摆脱这个和其他人。
<mat-error *ngIf="feedbackForm.get('lastname')?.hasError('required') &&
feedbackForm.get('lastname')?.touched">Last Name is required</mat-error>
有一个好的代码。