Question

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

我的角度项目中有一个下拉列表和几个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是隐藏的。

通过默认，Div值应为opentype，并且Div2应该可见

Answer 1

您可以根据所选值使用 * 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>

Answer 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 用于显示/隐藏Divs。

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>

Answer 3

您可以添加一个控制所选值的变量。例如 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>

Answer 4

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

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

角度-根据下拉列表值显示或隐藏

5 个答案: