时间戳

首页 > 解决方案 > 下拉值未在模板驱动的表单中注册

angular - 下拉值未在模板驱动的表单中注册

问题描述

我在模板驱动表单中有一个选择下拉列表，其值使用 *ngFor 动态显示：

<form class="col-md-5 location-seachform" name="loctionForm" #f="ngForm" (ngSubmit)="onSubmit(f);" novalidate  >
   <select class="form-control" name="somename" ngModel >
     <option [value]="ii" [attr.selected]="ii==0 ? '' : null" *ngFor="let loc_crit of objectKeys(somecriteria); let ii= index"> {{somecriteria[loc_crit] }} 
     </option>
   <select>
<button class="btn btn--filled pull-right" type="submit"><span class="btn__copy"><span class="btn__label">Search</span></span></button>
</form>

现在的问题是，即使我使用过，下拉列表和我在单击提交按钮时进行控制台登录的对象都没有显示选择的默认值

[attr.selected]="ii==0 ? '' : null"

并且第一个选项在 chrome 调试器中显示为选中状态，但默认情况下第一个选项未选中。单击提交按钮时显示的对象也未显示默认值。对象是这样的： {somename:''}

而它应该是 {somename:'firstValue'}

标签： angular

解决方案

Angular 表单只查看 formcontrol 值，在这种情况下，您已经使用值""（空字符串）注册了 formcontrol，因此您的数据中不存在这样的值。您可以通过设置[ngModel]="0"是否要预先选择第一个选项来解决此问题。您还需要更改[value]为[ngValue], 因为value仅捕获字符串，而ngValue接受数字、对象。除非你当然希望它是一个字符串，否则使用[ngModel]="'0'". 所以总而言之，做（第一个选项）：

<select name="somename" [ngModel]="0">
 <option [ngValue]="ii" *ngFor="let loc_crit of objectKeys(somecriteria); let ii = index"> 
   {{somecriteria[loc_crit] }} 
 </option>
</select>

推荐阅读