在 angular 6 中将 select 字段占位符保留在 form.reset() 上
Keep select field placeholder on form.reset() in angular 6
link 帮助我在 select 框中使用占位符。
所以我的代码是
<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>
这是我的代码的一小部分。上面的代码工作得很好。当 select 字段的页面加载时 Membership
默认选项 Please select one option
是 selected.
但问题是当我重置表单时,文本 Please select one option
也被清除了。但我希望此默认选项在表单重置后保持 selected。重置我使用的表格 form.reset()
.
如果您更改了 select 中的值,则需要在重置表单时将 membership
的值设置为 undefined
。我不知道 form.reset()
的作用,但它可能会将值设置为 null
.
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;
我遇到了类似的问题。
在新标签页中打开页面在初始加载时显示 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
的初始值。
<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>
这是我的代码的一小部分。上面的代码工作得很好。当 select 字段的页面加载时 Membership
默认选项 Please select one option
是 selected.
但问题是当我重置表单时,文本 Please select one option
也被清除了。但我希望此默认选项在表单重置后保持 selected。重置我使用的表格 form.reset()
.
如果您更改了 select 中的值,则需要在重置表单时将 membership
的值设置为 undefined
。我不知道 form.reset()
的作用,但它可能会将值设置为 null
.
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;
我遇到了类似的问题。
在新标签页中打开页面在初始加载时显示 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
的初始值。