Отобразить поле формы в соответствии с выбранным значением в раскрывающемся списке Angular TypeScript

Question

Я хочу отобразить поле формы в соответствии с выбранным значением в раскрывающемся списке формы.

Например, если элемент, выбранный в раскрывающемся списке, является «первым», я хочу, чтобы формане изменить.

С другой стороны, если я выберу элемент «два» в раскрывающемся списке, я хочу, чтобы он отображал ввод «появляется»

Вот мой код на данный момент

HTML:

<div class="div-champs">
    <p id="champs">Type
       <span id="required">*</span>
    </p>
    <div class="select-style ">
        <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>
    </div>
</div>

<p id="champs">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

Машинопись:

   ...
private selectedOption: string;

options = [
  { name: "first", value: 1 },
  { name: "two", value: 2 }
]
  ...

Заранее благодарю за помощь.

Прекрасный день,

С уважением, Валентин

Answer 1

Вы можете использовать угловое условие в html, оно называется * ngIf.

<input *ngIf="selectedOption == 'two'" type="appears" class="form-control" name="appears" formControlName="appears">

Источник: https://angular.io/api/common/NgIf

Answer 2

Вы можете поставить if условие как -

<p id="champs" *ngIf="selectedOption == 'two'">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

HTML

      <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option [value]="o.name" *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>

Рабочая копия здесь - https://stackblitz.com/edit/angular-fqkfyx

Примечание. Похоже, вы довольно плохо знакомы с Angular. Stackoverflow не поможет в долгосрочной перспективе.