我已经建立了一个由nb-select组成的React式表单。我使用星云主题。当我重置我的表单时,除了选择之外,所有内容都被重置。它保存当前值。
HTML代码
<form [formGroup]="form">
<div class="form-group row">
<label for="title" class="label col-sm-3 form-control-label">Title :</label>
<div class="col-sm-9">
<nb-selectc id="title" formControlName="title" placeholder="Select">
<nb-option *ngFor="let title of Title" [value]="title">{{ title }}</nb-option>
</nb-select>
</div>
</div>
<div class="form-group row">
<label for="name" class="label col-sm-3 form-control-label">Name :</label>
<div class="col-sm-9">
<input type="text" nbInput fullWidth id="name" placeholder="Name" formControlName="name"
class="form-control"[ngClass]="{'is-invalid': f.name.errors && f.name.touched}"/>
<div *ngIf="f.name.errors && f.name.touched" class="invalid-feedback">
<div *ngIf="f.name.errors.required">Name is required</div>
</div>
</div>
</div>
<button nbButton (click)="resetForm(form)">Reset</button>
</form
我的TS代码是:
Title: any = ["Mr.", "Ms.", "Mrs."];
this.appointmentForm = this.fb.group({
title: new FormControl(""),
name: new FormControl("", [Validators.required]),
});
resetForm(form: FormGroup) {
form.reset()
}
我希望选择清除其选择
3条答案
按热度按时间kupeojn61#
通过写
form.reset()
来调用ngOnInit()
,而不是清除表单。这将清除所有内容。它刷新组件tzdcorbm2#
我有一个稍微不同的场景,在我的例子中,我只需要重置窗体中的nb-select组件,而不是整个窗体
.ts文件
.HTML文件
lkaoscv73#
在我的例子中,我有一个下拉列表,有时底层值必须被清除,下拉列表被禁用。当下拉列表的值被清除时,该值的文本在下拉列表中仍然可见。
摆脱这种持久文本的方法是在
nb-select
中包含一个空值,例如:为了避免空值与真实的可能的值一起显示,我添加了
*ngIf
,因此只有在二级下拉列表中没有显示实际值时才使用它(此时它被禁用,因此空值无关紧要)。