Angular NgForm的form.resetForm和form.reset不能使用数组。

Question

我有简单的 ngForm 我想添加多选择下拉菜单，引入数组。我面临一个奇怪的问题。当我保存重置表单时，我使用 form.formReset() 但我仍然得到 "字段需要验证 "的错误信息，刷新后就可以清除。

验证问题是在多选后引入的。我已经尝试了一些东西，但没有运气。

<form #form="ngForm"
      class="form-horizontal"
      (ngSubmit)="save(form)">
  <inf-modal #modal
             (onHide)="form.resetForm()"
             size="medium">
    <mat-card>
      <mat-card-title class="inf-modal-title">
        Modal View
        <button type="button"
                class="close"
                aria-label="Close"
                (click)="modal.hide()">
          <span aria-hidden="true">
            <mat-icon>clear</mat-icon>
          </span>
        </button>
      </mat-card-title>
      <mat-card-content>
        <div class="row">
          <div class="col-lg-12">
            <div class="form-group">
              <div class="row">
                <div class="col-lg-8">
                  <inf-person-org-composite-entity-selector name="autocompleteSelector"
                                                            [(ngModel)]="selectedTarget"
                                                            (ngModelChange)="storeTargetId($event)"
                                                            [blackList]="blacklistedTargets"
                                                            [multiSelect]="false"
                                                            [required]="true"
                                                            [placeholder]="'Name"

                                                            [entitySelectorVisible]="false">
                  </inf-person-org-composite-entity-selector>
                </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row"
             *ngIf="!isTargetInvestigation()">
          <div class="col-lg-6">
            <inf-multiselect #linkType="ngModel"
                        name="linkType"
                        [(ngModel)]="record.linkType"
                        [optionKey]="'linkType'"
                        [placeholder]="'linkType' "
                        [required]="true"></inf-multiselect>
          </div>
        </div>
        <div class="row"
             *ngIf="!isTargetInvestigation()">
          <div class="col-lg-12">
            <div class="form-group">
              <mat-form-field>
                <input matInput
                       #comment="ngModel"
                       [(ngModel)]="record.comment"
                       name="comment"
                       [placeholder]="'comment' ">
              </mat-form-field>
            </div>
          </div>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button type="button"
                (click)="modal.hide()"
                mat-button
                color="primary">{{ 'common.cancel' | translate }}
        </button>
        <button type="reset"
                (click)="form.resetForm()"
                mat-button
                color="primary">{{ 'common.reset' | translate }}
        </button>
        <button mat-raised-button
                color="primary"
                type="submit">{{ 'common.assign' | translate}}
        </button>
      </mat-card-actions>
    </mat-card>
  </inf-modal>
</form>

我不知道我错过了什么，我甚至试过用原始和肮脏的属性来玩。ngForm.

Answer 1

经过大量的讨论和论坛。我建议在多选组件内部进行修改，也许检查组件内部的复位功能，或者创建一个，并尝试添加.markAsPristine()和.markAsUntouched()，每当点击复位时检查一个条件，即选择了一个空白值。