Question

我需要在单击按钮时重置下拉列表值。
在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>

Answer 1

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

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

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

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

Answer 2

尝试一下：

this.PepBlacklisted ='';

Answer 3

首先在

中设置一个值

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

Answer 4

这里在工作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;
}

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

4 个答案: