Form builder in dropbox element

0

I have the following form group:

createFormGroup (): FormGroup {     return this.fb.group ({       description: '',       value: '',       sku: ''       type: '',     });   }

where: 'type' should be the value of the dropdown.

My drop:

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle btn-group waves-effect" 
       type="button" id="dropdownTipoVariacao"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       {{categoriaForm.value.variacoes.tipo == null ? 'Tipo De Variação' : categoriaForm.value.variacoes.tipo }}
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu3">
       <h6 class="dropdown-header">Tipo de Variação</h6>
       <a formControlName="tipo" name="dropvariacao{{i}}" (click)="setTipoVariacao(i,tipoVariacao.nome)" *ngFor="let tipoVariacao of tiposvariacoes;let j = index"
       class="dropdown-item">{{tipoVariacao.nome}}</a>
    </div>
 </div>

It turns out that I get:

  

No value accessor for form control with name: 'type'

I read that only inputs can receive formControlName.

So I tried to add the function:

(click)="setTipoVariacao(i,tipoVariacao.nome)"

  setTipoVariacao(index: number, nome: string){
    this.categoriaForm.value.variacoes[index].tipo = nome
  }

If you want to change the value of an array, you can use the following command:

{ "descricao": "fsafasfasf", "valor": "", "sku": "", "tipo": "" }

How to circumvent this situation?

    
asked by anonymous 19.09.2018 / 20:20

1 answer

0

If someone goes through this, change the dropdown to a select:

<select formControlName="tipo" class="form-control" aria-labelledby="dropdownMenu3">
   <h6 class="dropdown-header">Tipo de Variação</h6>
   <option *ngFor="let tipoVariacao of tiposvariacoes;let j = index"
   class="dropdown-item">{{tipoVariacao.nome}}</option>
</select>

Select has support for formControlName and works as expected.

    
19.09.2018 / 20:56