Angular 2:如何在切换单选按钮时清除下拉列表和文本框值

时间:2017-02-18 13:34:42

标签: html css angular typescript

UI显示两个单选按钮,一个是YES,一个是NO,如果用户单击YES收音机然后我显示下拉列表,如果他单击否则显示文本框,现在如何在单选按钮之间切换时清除下拉列表和文本框值,切换时,文本框和下拉列表都显示以前的值。请帮助我。

<div id="radio" class="row">Are you an existing client?</p>

         <div class="form-check form-check-inline">
             <label class="form-check-label">
                <input type="radio" [(ngModel)]="radioValue" value="yes"/>yes
             </label>
         </div>

         <div class="form-check form-check-inline">
                <label class="form-check-label">
                <input type="radio" [(ngModel)]="radioValue" value="no"/>no
                </label>
         </div>
         </div>

      <label *ngIf="radioValue == 'yes'">Select Client</label>
             <select #select [(ngModel)]="cuurent" (change)=logDropdown(select.value) class="form-control input-group" 
                 *ngIf="radioValue == 'yes'">
                <option *ngFor="let item of list" [value]="item.id">{{item.name}}</option>
            </select>

         <div class="form-group">
            <label  *ngIf="radioValue == 'no'">Enter Client</label>  
            <input type="text" [(ngModel)]="inputsic" class="form-control input-group" *ngIf="radioValue == 'no'" />
         </div>
          </div>

1 个答案:

答案 0 :(得分:2)

<input type="radio" [(ngModel)]="radioValue" (ngModelChange)="reset()" value="yes"/>yes
<input type="radio" [(ngModel)]="radioValue" (ngModelChange)="reset()" value="no"/>no
reset() {
  this.inputsic = '';
  this.current = null;
}