Error: 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;

Answer 2

您是否尝试过使用 ? 运算符？

<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，这就是为什么使用 ? 可选链接 运算符安全地检查是否值无效或有效。

Optional chaining

Answer 3

它说 '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>

有一个好的代码。

Error: Member 'feedbackFormDirective' implicitly has an 'any' type in angular

Error: Member 'feedbackFormDirective' implicitly has an 'any' type in angular

javascript

angular

typescript

reset

angular-forms