错误：成员“feedbackFormDirective”隐含的角度为“任何”类型答案

【问题标题】：Error: Member 'feedbackFormDirective' implicitly has an 'any' type in angular错误：成员“feedbackFormDirective”隐含的角度为“任何”类型
【发布时间】：2021-08-18 21:09:48
【问题描述】：

我的项目期间出现错误。我找不到任何解决方案，我正在使用 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;
                         ~~~~~~~~~~~~~~~~~~~~~

【问题讨论】：

标签： javascript angular typescript reset angular-forms

【解决方案1】：

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

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

...

@ViewChild('fform') feedbackFormDirective: NgForm;

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

它说'对象可能为空'。如果添加“？”在 "feedbackForm.get('lastname')" 对象之后并进行如下更改，您将摆脱这个和其他。

<mat-error *ngIf="feedbackForm.get('lastname')?.hasError('required') && 
feedbackForm.get('lastname')?.touched">Last Name is required</mat-error>

有一个好的代码。

【讨论】：