Getting error while passing event.target.value in angular ts

Question

My app.component.html code is :

    <h1>Password Generator</h1>
<div>
<label>Length</label>
</div>
<input (input)="onChangeLength($event.target.value)"/>
<div>
<div>
  <input (change)="onChangeHandlerLetter()" type="checkbox" />
  <label>Use Letter</label>
</div>
<div>
  <input (change)="onChangeHandlerNumbers()" type="checkbox" />
  <label>Use Numbers</label>
</div>
<div>
  <input (change)="onChangeHandlerSymbols()" type="checkbox" />
  <label>Use Symbols</label>
</div>
<div>
  <button (click)="onButtonClick()">Generate</button>
  </div>
</div>
<div>
  <label>Your Password</label>
</div>
<input [value]="password"/>

{{password}}

My app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  length=0;
  includeLetters=false;
  includeSymbols=false;
  includeNumbers=false
  onChangeHandlerLetter=()=>{
    this.includeLetters=!this.includeLetters
  }
  onChangeHandlerSymbols=()=>{
    this.includeSymbols=!this.includeSymbols
  }
  onChangeHandlerNumbers=()=>{
    this.includeNumbers=!this.includeNumbers
  }
  onChangeLength=(val:string)=>{
    const parsedValue=parseInt(val);
    if(!isNaN(parsedValue)){
      this.length=parsedValue
    }
    console.log(length);
  }
  password=" "
  onButtonClick=()=>{
  this.password="My Password"
  console.log("button clicked");
  console.log(`Following should be included :
              Sybmols : ${this.includeSymbols}
              Numbers : ${this.includeNumbers}
              Letters : ${this.includeLetters}`)
 }

}

error :

index.js:561 [webpack-dev-server] ERROR
src/app/app.component.html:5:46 - error TS2531: Object is possibly 'null'.

5 <input (input)="onChangeLength($event.target.value)"/>
                                               ~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Hello greetings community , I am new to TS and angular so I dont know why I am getting this error I need to take input from input bar and change into number and console.log I am following a tutorial and he is getting correct output I dont know why

hi! that issue is because when input starts it has no value or when you delete all the characters, so the event lauch by the event can be null. You can use two thigs. try with this onChangeLength($event.target?.value) or try by only sending $event onChangeLength($event) and checking on the code inside onChangeLength if the event is receiving a value — Florencia Cames
– Florencia Cames, Commented Oct 18, 2022 at 6:12

Kazi Mohammad Ali Nur Romel · Accepted Answer · 2022-10-18 06:43:53Z

You need to tell TypeScript the type of the HTMLElement which is your target.

To do so instead of $event.target.value please use $event as below:

<input (input)="onChangeLength($event)"/>

then in app.component.ts use:

const parsedValue=parseInt((<HTMLInputElement>event.target).value);

Working codes:

app.component.ts

import { Component } from '@angular/core';
import { ColdObservable } from 'rxjs/internal/testing/ColdObservable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  length=0;
  includeLetters=false;
  includeSymbols=false;
  includeNumbers=false
  onChangeHandlerLetter=()=>{
    this.includeLetters=!this.includeLetters
  }
  onChangeHandlerSymbols=()=>{
    this.includeSymbols=!this.includeSymbols
  }
  onChangeHandlerNumbers=()=>{
    this.includeNumbers=!this.includeNumbers
  }
  onChangeLength=( event: Event)=>{
    
     const parsedValue=parseInt((<HTMLInputElement>event.target).value);
     if(!isNaN(parsedValue)){
       this.length=parsedValue
     }
     console.log(length);
  }
  password=" "
  onButtonClick=()=>{
  this.password="My Password"
  console.log("button clicked");
  console.log(`Following should be included :
              Sybmols : ${this.includeSymbols}
              Numbers : ${this.includeNumbers}
              Letters : ${this.includeLetters}`)
 }

}

app.component.html

<h1>Password Generator</h1>
<div>
<label>Length</label>
</div>
<input (input)="onChangeLength($event)"/>
<div>
<div>
  <input (change)="onChangeHandlerLetter()" type="checkbox" />
  <label>Use Letter</label>
</div>
<div>
  <input (change)="onChangeHandlerNumbers()" type="checkbox" />
  <label>Use Numbers</label>
</div>
<div>
  <input (change)="onChangeHandlerSymbols()" type="checkbox" />
  <label>Use Symbols</label>
</div>
<div>
  <button (click)="onButtonClick()">Generate</button>
  </div>
</div>
<div>
  <label>Your Password</label>
</div>
<input [value]="password"/>

{{password}}

Collectives™ on Stack Overflow

Getting error while passing event.target.value in angular ts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related