需要重置下拉值在按钮上单击

时间:2019-09-25 11:30:40

标签: angular angular-material

我需要在单击按钮时重置下拉列表值。
在HTML中,我有一个onResetClick()函数。在.ts文件中,我需要编写逻辑来重置dropdwon。

有人可以帮我吗?


    <div class ="space">
    <mat-form-field>
         <mat-label>Is this partner a PEP?</mat-label>
         <mat-error *ngIf="formGroup.get('PepPartner').hasError('required')">
            PEP Partner  is required
          </mat-error>
      <mat-select disableRipple  [(ngModel)]="PepPartner" formControlName="PepPartner">
          <mat-option ></mat-option>
        <mat-option value="1">Yes</mat-option>
        <mat-option value="2">No</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Does this partner blacklisted</mat-label>
      <mat-error *ngIf="formGroup.get('PepBlacklisted').hasError('required')">
          Partner blacklisted is required
        </mat-error>
      <mat-select disableRipple  [(ngModel)]="PepBlacklisted" formControlName="PepBlacklisted" >
        <mat-option ></mat-option>
        <mat-option value="1">Yes</mat-option>
        <mat-option value="2">No</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field >
        <input matInput placeholder="Blacklist(s)" >
      </mat-form-field>

      <div class="button-position">
          <div class="text-right pr-0 pb-2">
            <div class="btn-group">
              &nbsp;&nbsp;&nbsp;
              <button type="button" id="button1" mat-raised-button class="text-uppercase app-btn app-btn-

      primary-border app-color-primary"
                (click)="validateForm()">Save</button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button type="button" id="button2" mat-raised-button class="text-uppercase app-btn app-btn-

      primary-border app-color-primary"
                (click)="onResetClick()">Clear</button>
            </div>
          </div>
        </div>

4 个答案:

答案 0 :(得分:1)

首先,您必须确定要使用template-driven forms还是reactive forms。请勿一起使用。在您的代码中,您同时使用[(ngModel)]formControlName


现在,对于带有ngModel的模板驱动表单,您可以使用以下方法:

onResetClick() {
  PepPartner = '';
  PepBlacklisted = '';
}

但是,如果您想重置整个表单,则可以在组件中的表单上调用reset。例如this.myForm.reset()

答案 1 :(得分:1)

尝试一下:

this.PepBlacklisted ='';

答案 2 :(得分:0)

首先在

中设置一个值
<mat-option value="0"></mat-option>

将其更改为

    <mat-select [(value)]="type">
                <mat-option value="all">All</mat-option>
                <mat-option value="online">Online Reg Copy</mat-option>
                <mat-option value="original">Original RC</mat-option>
            </mat-select>

onreset() {
  type="all" 
}

对于ngModel,只需在重置时设置变量值

this.formName.contols.controlName.setValue("0");

如果使用反应形式,则可以使用以下方式设置单个控件的值

this.formName.reset();

如果您想重置整个表格

{{1}}

答案 3 :(得分:0)

这里在工作Example

<mat-form-field>
      <mat-label>Does this partner blacklisted</mat-label>
      <mat-error *ngIf="formGroup.get('PepBlacklisted').hasError('required')">
          Partner blacklisted is required
        </mat-error>
      <mat-select disableRipple  [(ngModel)]="PepBlacklisted" formControlName="PepBlacklisted" >
        <mat-option ></mat-option>
        <mat-option value="1">Yes</mat-option>
        <mat-option value="2">No</mat-option>
      </mat-select>
    </mat-form-field>

.TS

onResetClick()
{
 this.PepBlacklisted = undefined;
}