Drop-down list in drop-down box disappears Angular 5

Question

I have a form in Angular 5 or when I select a value in a drop-down list it displays another one.

The trouble is that when I select (see link) in the first drop-down list the value 'two' and I select another value in the drop-down list that just appears this one disappears.

https://stackblitz.com/edit/angular-a4va9u?embed=1&file=src/app/app.component.html

(And when I select the value 'first' in the first drop-down list and again the value 'two' the one that reappears)

I did some research and I found an interesting link that corresponds to my problem but it is with AngularJs and when I read it to my problem it does not work (in addition my drop-down list appears according to the value of the drop-down list above) AngularJS select box options disappear when an item is selected

Click on the link is actually very simple to understand.

If you have a solution to my problem I am a taker.

Thank you in advance for your answers, I wish you a very good day.

Regards, Valentin

Answer 1

Both the dropdowns have the same formControlName

what is happening is, when you select the option "two" in the first dropdown, the *ngIf="usForm.value.type == 'two' evaluates to true and the second drop down appears. However, when you select anything in the second dropdown, because it is having same formControlName , it changes the value of type to something else, making the *ngIf="usForm.value.type == 'two' evaluate to false and therefore the second dropdown disappears.

You should have a different formControlName for this select option. Like sub-type perhaps.

<p id="champs" *ngIf="usForm.value.type == 'two'">Appears
      <select formControlName="sub_type" name="consistance">
        <option style="display:none">
        <option [value]="appears.name" *ngFor="let appear of appears">
          {{appear.name}}
        </option>
      </select>
    </p>

Answer 2

The dropdown in the code have the same formcontrolName .

      <select formControlName="type"

when you select the option "two" in the first select box, the *ngIf="usForm.value.type == 'two' becomes true and the second drop down shows up in view. But when you select anything else in the second select, because it is having same formControlName, it changes the original value of type to newly selected value. This makes *ngIf="usForm.value.type == 'two' to become false and that's the reason your second dropdown doesn't goes away.