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)"
                                    ~~~~~~```

CodePudding user response：

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

CodePudding user response：

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;