javascript - 错误 : Member 'feedbackFormDirective' implicitly has an 'any' type in angular

Question

我在项目中遇到了错误。我找不到任何解决方案，因为我使用的是 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;
                         ~~~~~~~~~~~~~~~~~~~~~

Answer 1

为避免隐式任何类型错误，您应该为表单明确设置类型。

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

...

@ViewChild('fform') feedbackFormDirective: NgForm;