Как изменить angular реактивных форм на основе выбранной опции выпадающего - PullRequest
Новая
       1

Как изменить angular реактивных форм на основе выбранной опции выпадающего

0 голосов
/ 28 марта 2020

Все, я пытаюсь создать экран для нашего внутреннего запроса / контактную форму для поддержки. Так что у нас есть три разные категории (сеть, программное обеспечение и другие). Таким образом, после того, как агент введет данные своего электронного адреса / имени, он выбирает категорию. Таким образом, если пользователь выбирает сеть, то в форме следует ввести текстовые полосы для (Имя, электронная почта, идентификатор и примечания), если они выбирают «Программное обеспечение» (строка ввода под элементами должна иметь (Имя, электронная почта, программное обеспечение, версия, LAn и примечания). ) Если они выберут «Другие», то параметры будут такими же, как и у «Сети». Как только пользователь введет «Отправить», опубликует данные в API и обработает их.

Итак, как мне добиться изменений формы? основанный на выборе опции из выпадающего списка в angular реактив

Пожалуйста, помогите

Вот ссылка на stackblitz.

https://stackblitz.com/edit/angular-wq3qqt

1 Ответ

1 голос
/ 28 марта 2020

Вы можете использовать ngIf и взять значения из выпадающего списка для сравнения. Я сделал этот пример для программного обеспечения. Для случаев, когда контроль формы существует во всех случаях, нет необходимости использовать ngIf.

* ngIf = "profileForm.get ('item'). Value == 'Software'"

Рабочий пример 

 <form [formGroup]="profileForm"(ngSubmit)="onSubmit()">
    <h1>Contact Form</h1>
  <div >
    <label>
     Your Name:
     <input type="text" formControlName="yourname">
     </label>
    </div>
 <div>

<label>
  Your Email:
   <input type="text" formControlName="youremail">
  </label>
 </div>


<div>
   <label>
   Items:
  <select id="Item" formControlName="item">
    <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>
</select>
</label>

</div>

 <div>
 <label>
  Name:
 <input type="text" formControlName="name">
  </label>
 </div>
 <div>
 <label>
   Email:
   <input type="text" formControlName="email">
  </label>
  </div>
 <div *ngIf="profileForm.get('item').value == 'Software'">
 <label>
 Software:
 <input type="text" formControlName="software">
 </label>
 </div>

<div *ngIf="profileForm.get('item').value == 'Software'">
<label>
 Lan:
 <input type="text" formControlName="lan">
</label>
</div>

<div *ngIf="profileForm.get('item').value == 'Software'">
  <label>
   Version:
 <input type="text" formControlName="Version">
</label>
</div>
<div *ngIf="profileForm.get('item').value == 'Software'">
<label>
Remarks:
<input type="text" formControlName="remarks">
 </label>
 </div>

<button type="submit" [disabled]="!profileForm.valid">Submit</button>


</form>
...