1
votes

Comment transmettre l'ID d'option lors de la sélection dans Angular?

J'ai un contrôle de sélection et j'aimerais qu'il transmette l'identifiant de l'option sélectionnée lorsque l'option change, mais je ne sais pas comment faire cela.

<select id="companydropdown" (change)="getcompanyid($event)">
<option *ngFor="let company of filteredCompanies" value={{company.companyName}} 
id={{company.id}}>
{{company.companyName}}
</option>
</select>

p >

angular

0 commentaires

4 Réponses :

0
votes

Le passer où? Comme au lieu de companyName ? Ce qui est passé est la valeur de l'option, il vous suffit de changer la valeur pour qu'elle devienne l'ID:

<select id="companydropdown" change="getcompanyid($event)">
   <option *ngFor="let company of filteredCompanies" value={{company.id}} id={{company.id}}>
      {{company.companyName}}
   </option>
</select>

2 commentaires

l'événement getcompanyid ($ event) doit envoyer l'identifiant de l'option au lieu de la valeur de l'option

Vous ne pouvez pas vraiment faire ça. L'événement (change) envoie la valeur de l'option sélectionnée. Vous pouvez définir la valeur sur tout ce que vous voulez, y compris l'ID. La valeur n'est affichée nulle part.

1
votes

Vous pouvez accéder à la valeur sélectionnée en utilisant "$ event.target.value". Pour cela, la valeur attendue doit être affectée à la propriété "value" de la balise "".

<select id="companydropdown" (change)="getcompanyid($event.target.value)">
  <option *ngFor="let company of filteredCompanies" value="{{company.id}}">
    {{company.companyName}}
  </option>
</select>

Notez les changements dans le gestionnaire d'événements et

Voir le stackblitz pour un exemple complet : https://stackblitz.com/edit/select-option-to-event

0 commentaires

1
votes

La meilleure façon de faire est d'utiliser ReactiveFormsModule. Tout d'abord, vous devez déclarer les contrôleurs FormBuilder à configurer, puis un tableau de vos éléments (options), comme dans cet exemple:

<select class="custom-select" (change)="changeCity($event)" formControlName="cityName">
   <option value="" disabled>Choose your city</option>
   <option *ngFor="let city of City" [ngValue]="city">{{city}}</option>
</select>

Ensuite, vous pouvez itérer vos options au modèle: p>

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isSubmitted = false;

  // City Names
  City: any = ['Florida', 'South Dakota', 'Tennessee', 'Michigan', 'New York']

  constructor(public fb: FormBuilder) { }

  /*########### Form ###########*/
  registrationForm = this.fb.group({
    cityName: ['', [Validators.required]]
  })

  // Getter method to access formcontrols
  get cityName() {
    return this.registrationForm.get('cityName');
  }

  /*########### Template Driven Form ###########*/
  onSubmit() {
    this.isSubmitted = true;
    if (!this.registrationForm.valid) {
      return false;
    } else {
      alert(JSON.stringify(this.registrationForm.value))
    }

  }

}

Voici un tutoriel sympa et complet pour vos besoins: https://www.positronx.io/angular -7-select-dropdown-examples-with-reactive-forms /

Veuillez également lire la documentation pour mieux comprendre ReactiveForms, peut-être que cela prend quelques minutes mais ça vaut le coup: https://angular.io/guide/reactive-forms

0 commentaires

0
votes

Cela devrait vous donner l ' id sur le gestionnaire d'événement de modification event.currentTarget.options[event.currentTarget.options.selectedIndex .id

0 commentaires