Form Builder in Dropbox element

Question

I have the following form group:

createFormGroup(): Formgroup { Return this.fb.group({ Description: ''' value: '', sku: ' guy: '', }); }

where: 'type' should come 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>

I happen to get:

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

I read that only inputs can receive formControl.

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 I print the running result on the screen it even adds the value, but when I type some value in some field of my formControl it deletes the array type:

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

How to get around this situation?

Answer 1

If someone goes through this, exchange the dropdown for 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 formControl support and works as expected.