I am getting an error while building angular app.

HTML Template

  <mat-form-field *ngIf="requested">
    <input
      matInput
      (input)="sendingAccesscode($event)"
      placeholder="{{ 'CODE_LABEL' | i18next }}"
      name="accesscode"
      formControlName="accesscode"
      minlength="6"
      required
    />
  </mat-form-field>

TypeScript

  sendingAccesscode(event: { target: { value: string }}) {
    if (event.target?.value.length >= 6) {
      this.accessCode.emit(event.target.value);
    }
  }

I am getting the following error:

error TS2345: 
Argument of type 'Event' is not assignable to parameter of type '{ target: { value: string; }; }'.
  Types of property 'target' are inpatible.
    Type 'EventTarget | null' is not assignable to type '{ value: string; }'.
      Type 'null' is not assignable to type '{ value: string; }'.

13       (input)="sendingAccesscode($event)"
                                    ~~~~~~```

I am getting an error while building angular app.

HTML Template

  <mat-form-field *ngIf="requested">
    <input
      matInput
      (input)="sendingAccesscode($event)"
      placeholder="{{ 'CODE_LABEL' | i18next }}"
      name="accesscode"
      formControlName="accesscode"
      minlength="6"
      required
    />
  </mat-form-field>

TypeScript

  sendingAccesscode(event: { target: { value: string }}) {
    if (event.target?.value.length >= 6) {
      this.accessCode.emit(event.target.value);
    }
  }

I am getting the following error:

error TS2345: 
Argument of type 'Event' is not assignable to parameter of type '{ target: { value: string; }; }'.
  Types of property 'target' are inpatible.
    Type 'EventTarget | null' is not assignable to type '{ value: string; }'.
      Type 'null' is not assignable to type '{ value: string; }'.

13       (input)="sendingAccesscode($event)"
                                    ~~~~~~```

• javascript
• angular
• events
• angular-event-emitter

Share Improve this question Follow edited Aug 12, 2022 at 6:17 shubham_agrawal asked Aug 12, 2022 at 6:16 shubham_agrawalshubham_agrawal 3111 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

How about setting it to the type Event this will fix your issue!

you can also use InputEvent

sendingAccesscode(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    if (value && value.length >= 6) {
      console.log(value);
    }
  }

stackblitz

The error is due to Angular strict mode is enabled. In strict mode Angular make sure the typing on template types correctly infer on what have been called on TS side.

Over here typescript cannot determine what is going on when the target object is evaluated in destructing { target: { value: string }}. Thus you have to first convert objects to relevant Type over here to infer the appropriate type HTMLInputElement. Then rest of things are sorted on typescript side.

const value = (event.target as HTMLInputElement).value;