Take a select value at the angle

Asked

Viewed 3,741 times

2

Good morning! I need to take a value from one select to pass the value to the other, but I am new in angular and html...

Code of the select:

<div class="col-md-3">
      <select class="form-control" >
        <option selected>Selecione...</option>
        <option *ngFor="let tipo of tipos">{{tipo.Codigo}} - {{tipo.Nome}}</option>
      </select>
    </div>

As I said before, I need to first get the code of select. I thank you in advance ^^

angular html-select

2 answers

4


I know it has been a long time the question. But, I also searched and found the answer. How I got, I will answer. For future consultations.

In HTML:

<select class="form-control" type="number" [(ngModel)]="cidadeId" (ngModelChange)="onAddCidade()" >
  <option *ngFor="let cidades of cidade" [ngValue]="cidades.Id">
    <p>{{ cidades.Id }}, {{ cidades.NomeCidade }}, {{ cidades.PaisCidade }}</p>
  </option>
</select>

Where:

type="number" -> Type of the variable that will catch.

[(ngModel)]="cityId" -> Field of the variable that will go to the Component

[ngValue]="cities. Id" -> This field will be the one you want to take

(ngModelChange)="onAddCity()" -> Function that will be called to perform something when selecting.

In the case of the example above, you are taking the field Id of the object Cities.

No Component:

cidadeId: number; // Declaração da variável (Precisa ter o Mesmo nome da ngModel.).
  //id: number
  onAddCidade(){ // Função que foi chamada
    this.cidadeId = +this.cidadeId;
    console.log("estou no cidade compo... " + this.cidadeId); // Imprimiu o valor no Console log.
    console.log(this.number) // outra forma de imprimir.
  }

2

I did it this way to get the value of options, I’m using reactive forms for this.

<label>Gênero</label>
        <select class="form-control mb-3" formControlName="sex">
            <option hidden >Selecione</option>
            <option>Masculino</option>
            <option>Feminino</option>
            <option>Unissex</option>
        </select>

and my formControlName="sex" is pointing to a formgroup

 this.registerProducts = this.formBuilder.group({
      title: [null, Validators.required],
      description: [null, Validators.required],
      sex: [null, Validators.required],
      valueItem: [null, Validators.required],
      fileImage: [null], 
    });

good caught the value of options by placing formControlName in the tag select

Browser other questions tagged angular html-select

You are not signed in. Login or sign up in order to post.