La propriété 'value' n'existe pas sur le type EventTarget en TypeScript

Question

Donc le code suivant est en Angular 4 et je ne comprends pas pourquoi il ne fonctionne pas comme prévu.

Voici un extrait de mon gestionnaire:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //ce ne fonctionnera pas
}

Élément HTML:

Le code me donne l'erreur:

La propriété 'value' n'existe pas sur le type 'EventTarget'.

Mais comme on peut le voir dans le console.log, la valeur existe sur event.target.

Answer 1

Dans le template -

`(keyup)="value2=$any($event.target).value"`

dans le composant -

getInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

Answer 2

Vous devriez utiliser la propriété event.target.value avec un gestionnaire onChange sinon vous pourriez voir :

index.js:1437 Avertissement: Échec de validation de la propriété : Vous avez fourni une propriété `value` à un champ de formulaire sans gestionnaire `onChange`. Cela rendra le champ en lecture seule. Si le champ doit être mutable, utilisez `defaultValue`. Sinon, définissez soit `onChange` soit `readOnly`.

Ou si vous souhaitez utiliser un autre gestionnaire que onChange, utilisez event.currentTarget.value

Answer 3

Vous pouvez également créer votre propre interface.

export interface UserEvent {
  target: HTMLInputElement;
}

   ...

onUpdatingServerName(event: UserEvent) {
  .....
}

Answer 4

Vous pouvez le parser explicitement en "HTMLInputElement" et accéder ensuite à 'value'

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = (event.target).value; 
}

Answer 5

Comme vous le savez, TypeScript a toujours été strictement basé sur le type de données de l'élément. Ainsi, vous ne pouvez pas accéder directement aux attributs d'un élément sans spécifier son type de données. L'event.target est un HTMLElement qui est le parent de tous les éléments HTML, mais qui n'est pas garanti d'avoir la propriété value.

Donc, nous devons convertir le type de la variable event.target pour pouvoir accéder à l'attribut value.

OnUpdatingServerName (event: Event) {
  console.log(event);
  var element = event.target as HTMLElement
  this.newserverName = element.value;
}