Необходимо сбросить значения выпадающего при нажатии кнопки

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

Попробуйте это:

this.PepBlacklisted = '';

Answer 2

Сначала вы должны решить, хотите ли вы использовать шаблонные формы или реактивные формы .Не используйте оба вместе .В своем коде вы используете [(ngModel)], а также formControlName вместе.

---

Теперь, для шаблонно-управляемых форм с ngModel, вы можете использовать попробовать это:

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

Но если вы хотите сбросить всю форму, вы можете вызвать reset на форме в вашем компоненте.например, this.myForm.reset()

Answer 3

Здесь работает Пример

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

Answer 4

Сначала установите значение в

<mat-option ></mat-option>

и измените его на

<mat-option value="0"></mat-option>

В случае ngModel просто установите значение переменной при сбросе

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

Есливы используете реактивную форму. Вы можете установить значение отдельного элемента управления, используя

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

. Если вы хотите сбросить всю форму

this.formName.reset();