nb-select 未在 form.reset 上清除 selection

Question

我构建了一个由 nb-select 组成的反应形式。我正在使用星云主题。当我重置我的表单时，除了 selection 之外的所有内容都会被重置。它保持当前值。

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

我希望 select 清除其 selection

Answer 1

不是清除表格，而是写 form.reset() 呼叫 ngOnInit()。这将清除所有内容。它，正在刷新组件

Answer 2

我遇到了一些不同的情况。就我而言，我只需要重置表单中的 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>

nb-select 未在 form.reset 上清除 selection

nb-select is not clearing selection on form.reset

typescript

angular-reactive-forms

formgroups

nebular