Angular - 根据下拉列表值显示或隐藏答案

【问题标题】：Angular - Show or Hide based on Dropdown list valueAngular - 根据下拉列表值显示或隐藏
【发布时间】：2019-05-21 13:44:47
【问题描述】：

我希望我的下拉列表根据所选值显示/隐藏 Div

我的 Angular 项目中有一个下拉列表和几个 Div，如代码所示

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;">
                     <option value="predefined">Predefined</option>
                     <option value="opentype">Open Type</option>
                    </select>           
              </div>

Div1

                      <div class="col-md-12 no-padding">
                        <label>Application Name</label>
                        <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                        <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                            Application Name is required! </span>
                      </div>

Div2

                <div class="col-md-12 no-padding">
                  <label>Main Menu</label>
                  <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
                </div>

如果选择的值是预定义的，那么 Div1 是可见的，而 Div2 是隐藏的，但如果是 opentype 则 Div2 是可见的，而 Div1 是隐藏的。

默认情况下，Div1 的值应该是 opentype，Div2 应该是可见的

【问题讨论】：

标签： angular

【解决方案1】：

您可以添加一个控制所选值的变量。例如 selectedType，然后，使用 ngIf 隐藏或显示元素。

在.component.ts中

  selectedType = 'opentype';

  onChange(event) {
    this.selectedType = event.target.value;
  }

在html中

<div class="col-md-12 no-padding">
  <label>Reply Type</label>

  <select (change)="onChange($event)" formControlName="replytype" class="form-control select2" type="text" style="width: 100%;">
    <option value="predefined">Predefined</option>
    <option selected value="opentype">Open Type</option>
  </select>
</div>

<div *ngIf="selectedType == 'predefined'" class="col-md-12 no-padding">
  <label>Application Name</label>
  <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
  <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
    Application Name is required! </span>
</div>

<div *ngIf="selectedType == 'opentype'" class="col-md-12 no-padding">
  <label>Main Menu</label>
  <input type="text" class="form-control" id="mainmenu" placeholder="Message Text">
</div>

【讨论】：

【解决方案2】：

这里我在下拉列表中使用了 ngModel，以便您可以获取从下拉列表中选择的值。

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" [(ngModel)]="optionValue">
                     <option value="predefined">Predefined</option>
                     <option value="opentype" selected>Open Type</option>
                    </select>           
</div>

在 Ts 文件中，您需要像这样声明一个名为 optionValue 的变量：

`optionValue`;

现在您可以使用 ngIf 来显示/隐藏 Div。

Div1

<ng-container *ngIf="optionValue == 'predefined'>
 <div class="col-md-12 no-padding">
                    <label>Application Name</label>
                    <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                    <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                        Application Name is required! </span>
                  </div> 
</ng-container>

Div2

<ng-container *ngIf="optionValue == 'opentype'"
<div class="col-md-12 no-padding">
              <label>Main Menu</label>
              <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
            </div> 
</ng-container>

【讨论】：

我应该将 optionValue 声明为什么类型的变量？

【解决方案3】：

您可以使用 *ngIf 到 show/hide div 基于所选值

试试这个：

<select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" (change)="setReplyTypeValue()">
  <option value="predefined">Predefined</option>
  <option value="opentype">Open Type</option>
</select>

TS：

selectedValue:any

  setReplyTypeValue() {
   // set 'predefined' or 'opentype' based on selected value of the form
    this.replytype = selectedValue
  }

DIV1：

<div class="col-md-12 no-padding" *ngIf="replytype =='predefined'">
  <label>Application Name</label>
  <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
  <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
      Application Name is required! </span>
</div>

DIV2：

<div class="col-md-12 no-padding" *ngIf="replytype =='opentype'">
  <label>Main Menu</label>
  <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
</div>

【讨论】：

我喜欢这个答案，因为现在我可以更好地控制代码，比如是否要添加更多逻辑。顺便说一句，我应该怎么做才能禁用隐藏 div 上的任何类型的验证？

【解决方案4】：

在 ts 中使用 replytype 有两种方法

<div class="col-md-12 no-padding">
    <label>Reply Type</label>
    <select class="form-control select2" [(ngModel)]="replytype" type="text" style="width: 100%;">
     <option value="predefined">Predefined</option>
     <option value="opentype">Open Type</option>
    </select>
</div>

*ngIf 的第一个方法；否则

<div class="col-md-12 no-padding"  *ngIf="replytype === 'predefined'; else #opentype">
    <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
    <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
        Application Name is required! 
    </span>
<div>

<ng-template #opentype>
    <div class="col-md-12 no-padding">
      <label>Main Menu</label>
      <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
    </div> 
</ng-template>

或者使用 ngSwitch 的第二种方法（您可以显示多个 div）

<ng-container [ngSwitch]="replytype">
    <div class="col-md-12 no-padding"  *ngSwitchCase="'predefined'">
        <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
        <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
            Application Name is required! 
        </span>
    </div> 

    <div class="col-md-12 no-padding" *ngSwitchDefault>
      <label>Main Menu</label>
      <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
    </div> 
</ng-container>

【讨论】：

【解决方案5】：

对于反应形式，我们可以使用

form.controls['<fieldname>'].value === 'somecheckvalue'

例如：

<div class="col-md-12 no-padding">
  <label>Reply Type</label>

  <select (change)="onChange($event)" formControlName="replytype" class="form-control select2" type="text" style="width: 100%;">
    <option value="predefined">Predefined</option>
    <option selected value="opentype">Open Type</option>
  </select>
</div>

<div *ngIf="form.controls['replytype'].value === 'predefined'" class="col-md-12 no-padding">
  <label>Application Name</label>
  <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
  <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
    Application Name is required! </span>
</div>

<div *ngIf="form.controls['replytype'].value === 'opentype'" class="col-md-12 no-padding">
  <label>Main Menu</label>
  <input type="text" class="form-control" id="mainmenu" placeholder="Message Text">
</div>

【讨论】：