如何根据下拉列表的选定选项更改角度反应形式答案

【问题标题】：How to change the angular reactive forms based on selected option of the dropdown如何根据下拉列表的选定选项更改角度反应形式
【发布时间】：2020-07-08 23:45:04
【问题描述】：

所有，我正在尝试为我们的内部请求/联系表单创建一个屏幕以获得支持。所以我们有三个不同的类别（网络、软件和其他）。因此，在代理输入他/她的电子邮件/姓名的详细信息后，他会选择类别。因此，如果用户选择网络，那么如果他们选择“软件”，则表单应该输入文本栏（名称、电子邮件、ID 和备注）（项目下方的输入栏应该有（名称、电子邮件、软件、版本、局域网和备注） ) 如果他们选择“其他”，则选项将与“网络”选项相同。一旦用户输入提交。会将数据发布到 api 并进行处理。

那么在这里我如何根据从角度反应的下拉菜单中选择选项来实现表单更改

请帮忙

这里是stackblitz的链接。

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

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

您可以使用 ngIf 和并从下拉列表中获取值进行比较。我为软件制作了这个示例。对于所有情况下都存在表单控件的情况，不需要使用ngIf。

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

Working Example

 <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>

【讨论】：