Dynamic selection box in form (select)

0

I have a question here, which is as follows: in a form I will have 2 select boxes, the first box is free and the second box the options inside it will vary according to the first check box. I used ngIf and ngTemplate, but I could not make it appear dynamically, I need a help. My project is working on version 6 of the Angular. I gave an edited one, I put the part of the code where I get the name, I forgot that hehe, excuse me personally!

<div class="form-group">
    <select class="form-control" formControlName="nome_completo">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </select>
</div>
<div class="form-group" *ngIf="nome_completo === 'Volvo'; else op2">
    <select class="form-control" formControlName="nome_usuario">
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
</div>
<ng-template #op2>
    <div class="form-group">
        <select class="form-control" formControlName="nome_usuario">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </select>
    </div>
</ng-template>
<div class="form-group">
    <input type="password" class="form-control" placeholder="Senha" formControlName="senha">
</div>

Well, I got a solution here, but kind of messed it up, I used a change in the main select field and when it changes, it calls an event. The problem is that it only rolls when you have 2 options that influence the others, wanted to know how to supply this. Part of the html:

<div class="form-group">
    <select class="form-control" formControlName="nome_completo" (change)="teste($event)">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <div class="form-group" *ngIf="gambi === 0; else op2">
    <select class="form-control" formControlName="nome_usuario">
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <ng-template #op2>
  <div class="form-group">
    <select class="form-control" formControlName="nome_usuario">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </select>
  </div>

Here is the part of the class:

public gambi: number = 0
public teste(event: Event): void{
if(this.gambi == 1){
  this.gambi = 0;
} else {
  this.gambi = 1;
}
}

And also people, I wanted to know how I can pro in the event of change, able to pass the written text of the field. Thank you in advance !!

    
asked by anonymous 07.11.2018 / 15:49

0 answers