在 Angular 6 中保留 form.reset() 上的选择字段占位符

Question

This 链接帮助我在选择框中使用占位符。 所以我的代码是

<form (ngSubmit)="onSubmit(form)" #form="ngForm" class="form-sample form-position">

<div class="form-group row">
  <label class="col-sm-3 col-form-label">Membership</label>
  <div class="col-sm-9">
    <select name="membership" [(ngModel)]="membership" class="form-control" required>
      <option [ngValue]="undefined" disabled selected hidden> Please select one option </option>

      <option>Free</option>
      <option>Professional</option>
    </select>
  </div>
</div>

 <div class="form-group row">
      <label class="col-sm-3 col-form-label">State</label>
      <div class="col-sm-9">
        <select [(ngModel)]="state" class="form-control" name="state" required=""
          placeholder="Select">
          <option [ngValue]="undefined" disabled selected hidden> Please select one option </option>
          <option *ngFor="let item of statesList">{{item}}</option>
        </select>
      </div>
    </div>

  <div class="text-center container-fluid form-group">
     <button [disabled]="!form.valid" type="submit" class="btn btn-primary btn-fw text-center">Submit</button>
     <button type="button" class="btn btn-secondary btn-fw" (click)="form.reset()">Clear</button>
  </div>
</form>

这是我的代码的一小部分。上面的代码工作得很好。当页面加载时选择字段Membership 默认选项Please select one option 被选中。

但问题是当我重置表单时，文本 Please select one option 也会被清除。但我希望在表单重置后保持选中此默认选项。重置我使用的表单form.reset()。

Answer 1

form.reset() 将 null 值设置为基础模型。由于您将 undefined 指定为默认选项的值，因此它们不匹配。要么提供用于清除表单的自定义逻辑，要么在重置时将模型值设置为undefined；

<button type="button" class="btn btn-secondary btn-fw" (click)="clearForm()">Clear</button>

在你的 component.ts 中

clearForm() {
  this.membership = undefined;
  this.state = undefined;
}

或

将相应模型的选项值和初始值更改为null

<option [ngValue]="null" disabled selected hidden> Please select one option </option>

在你的 component.ts 中

membership = null;
state = null;

这是第二个的演示https://stackblitz.com/edit/angular-ngvh9p

Answer 2

如果你改变了select中的值，需要在表单重置时将membership的值设置为undefined。我不知道form.reset() 做了什么，但它可能会将值设置为null。

Answer 3

我有一个类似的问题。

在新选项卡中打开页面会在初始加载时显示 placeholder/default 值，然后离开页面并返回，它是空白的。

我必须添加 [ngValue = "null"] 并将我的模型中的值最初设置为 'null'。

只有在那之后才出现。

错误代码：

<select name="title" [(ngModel)]="model.title">
    <option selected disabled> PLACEHOLDER </option>
    <option *ngFor="let title of titles" [value]="title"> title </option>
</select>

在component.ts中初始值设置为model.title = ''，即'undefined'。

通过添加显式 ngValue 并将其设置为“null”来修复代码：

<select name="title" [(ngModel)]="model.title">
    <option [ngValue]="null" selected disabled> PLACEHOLDER </option>
    <option *ngFor="let title of titles" [value]="title"> title </option>
</select>

同时设置model.title = null的初始值。