Working with multiple selects in form group

Asked

Viewed 39 times

0

I have two selects:

<div class="select">
  <select [class.disabled]="loadingcadastro" (change)="getIdTipoVariacao(item.value.tipo, i)" formControlName="tipo" class="select-text">
    <option class="dropdown-item" selected>{{item.value.tipo || 'Tipo da Variação'}}</option>
    <option [hidden]="item.value.tipo == tipoVariacao.valor" *ngFor="let tipoVariacao of tiposvariacoes;let j = index"
      class="dropdown-item">{{tipoVariacao.valor}}</option>
  </select>


  <span class="select-highlight"></span>
  <span class="select-bar"></span>
</div>

<div class="select">
  <select formControlName="valor_atributo" class="select-text">
    <option class="dropdown-item" selected>{{item.value.valor || 'Valor'}}</option>
    <option *ngFor="let ValorAtributo of listaAtributos;let x = index"
      class="dropdown-item">{{ValorAtributo.valor}}</option>
  </select>


  <span class="select-highlight"></span>
  <span class="select-bar"></span>
</div>

According to the choice of the first select, the name of that variant is sent to the getIdTipoVariacao function. Through this data I can send to my backend the id of the first option selected to return the data of the second select.

The problem happens that if I have two selects on the screen, when I change the first select, the other subsequent selects receive the value "Value". In case only the first select should receive the value "Value":

Follow my ts:

getIdTipoVariacao(variacao:string, index: number) { // pega o id de um determinado tipo de variação para mandar para a função get-lista-valor-atributo para obter a lista de atributos daquela variação
    for(let i=0;i<this.tiposvariacoes.length;i++){
      if(this.tiposvariacoes[i].valor == variacao){
        this.idTipoVariacao = this.tiposvariacoes[i].id
      }
    }

    //Tendo o id selecionado, já pode copular a próxima combobox de valores:
    this.listaValoresAtributo(this.idTipoVariacao);

        //Condição criada pois ao selecionar um Tipo de Variação, selecionar um atributo e depois trocar o tipo de variação, o atributo selecionado continuava na lista de tipo de variações.
    //Agora quando já existe um atributo selecionado e é trocado para outro tipo de variação que não contempla aquele atributo, é voltado para o valor padrão.
    if(this.variacaoForm.value.variacoes[index].valor != null){
      this.variacaoForm.value.variacoes[index].valor = null;
    }

inserir a descrição da imagem aqui

I would like when you change the first select option, change it to the default "Value" option, but only from the first sellect.

Could someone help me?

  • I believe because I’m firing an event change() any change of value that is in your first select will actually trigger your method getIdTipoVariacao(), you want this to occur when the user selects the first time but then the default value of the first returns, this?

  • Like, it has four selects. one depends on the choice of the other. If in the first I selected "Color", the second select generates the options "Blue, green, yellow". In my next select I select "Size", the second select generates the options "P, M, G", the problem is that after choosing these two, if I decide to change the size to color, both my selects receive "Value"

  • edited the post by adding a print

No answers

Browser other questions tagged

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