Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

error TS2345: Argument of type 'Event' is not assignable to parameter of type '{ target: { value: string; }; }'

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 incompatible.
    Type 'EventTarget | null' is not assignable to type '{ value: string; }'.
      Type 'null' is not assignable to type '{ value: string; }'.
13       (input)="sendingAccesscode($event)"
                                    ~~~~~~```
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;
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.