typescript nb-select不清除窗体上的选择,重置

bvhaajcl  于 2023-04-22  发布在  TypeScript
关注(0)|答案(3)|浏览(102)

我已经建立了一个由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()
}

我希望选择清除其选择

kupeojn6

kupeojn61#

通过写form.reset()来调用ngOnInit(),而不是清除表单。这将清除所有内容。它刷新组件

tzdcorbm

tzdcorbm2#

我有一个稍微不同的场景,在我的例子中,我只需要重置窗体中的nb-select组件,而不是整个窗体
.ts文件

performanceAction: FormGroup;
this.performanceAction.patchValue({
            target: []
        });

.HTML文件

<div class="row">
   <div class="col-md-12 form-group">
      <label>Email Lists</label>
      <nb-card>
         <nb-select
           formControlName="target"
           placeholder="Email Lists"
           multiple
         fullWidth>
           <nb-option
             *ngFor="let emailList of emailLists"
             value="{{ emailList.id }}">
             {{ emailList.name }}
           </nb-option>
         </nb-select>
      </nb-card>
   </div>
</div>
lkaoscv7

lkaoscv73#

在我的例子中,我有一个下拉列表,有时底层值必须被清除,下拉列表被禁用。当下拉列表的值被清除时,该值的文本在下拉列表中仍然可见。
摆脱这种持久文本的方法是在nb-select中包含一个空值,例如:

// Component
public emptyItem = new OptionObject();

// Template
<nb-select [(ngModel)]="selectedOption" fullWidth>
    <nb-option *ngFor="let item of availableItems" [value]="item">{{item.description}}</nb-option>
    <nb-option *ngIf="(availableItems?.length ?? 0) === 0" [value]="emptyItem"></nb-option>
</nb-select>

为了避免空值与真实的可能的值一起显示,我添加了*ngIf,因此只有在二级下拉列表中没有显示实际值时才使用它(此时它被禁用,因此空值无关紧要)。

相关问题