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

user_16668027 0
Viewed 297

I have an error during my project. I could not find any solution for that I am using angular 12 version.

my .ts file

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();

  }

}

my .html file

  ...
    <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>

error is like this:

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;
                         ~~~~~~~~~~~~~~~~~~~~~
angular-forms angular typescript reset javascript
3 Answers

For avoiding the implicitly any type error you should explicitly set a type for your form.

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

...

@ViewChild('fform') feedbackFormDirective: NgForm;
user_150259180

Have you tried using the ? operator?

<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>

Since you are getting access to a particular formControl by using its name,

e.g: form?.get('noneExistentControl').value

Angular wants to avoid getting access to a possible null object, that is why using the ? Optional chaining operator checks safely if a value is invalid or valid.

Optional chaining

user_28410910

It says that 'object is possibly null'. If you add a '?' after "feedbackForm.get('lastname')" object and change as below you will get rid of this and others.

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

Have a good code.

user_47634400
Related