我需要在单击按钮时重置下拉列表值。
在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">
<button type="button" id="button1" mat-raised-button class="text-uppercase app-btn app-btn-
primary-border app-color-primary"
(click)="validateForm()">Save</button>
<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>
答案 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;
}