I'm trying to set the default value of a select tag containing objects in a form, using [selected] and [ngValue]. But for some reason they seem incompaptible.
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因,它们似乎无法相提并论。
Example code:
示例代码:
<select id="selectedStore" *ngIf="showStore"
class="form-control"
formControlName="homeStore"
tabindex="{{getTabIndex('homeStore')}}">
<option *ngFor="let store of availableStores"
[ngValue]="store"
[selected]="store.storeId == personalInfo.homeStore?.storeId">
{{store.name}}
</option>
</select>
This code ends up just showing blank as the default value. If I remove the [ngValue] it works fine, except that then it's the store.name value that gets selected, instead of the store object.
这段代码最终只显示空白作为缺省值。如果删除[ngValue],它就可以正常工作,只是选择的是store.name值,而不是store对象。
Any suggestions?
有什么建议吗?
更多回答
You can use compareWith
with [ngValue]
可以将CompareWith与[ngValue]一起使用
eg:
例如:
<select id="selectedStore" *ngIf="showStore"
class="form-control"
formControlName="homeStore"
tabindex="{{getTabIndex('homeStore')}}" [compareWith]="compareByID">
<option *ngFor="let store of availableStores"
[ngValue]="store">
{{store.name}}
</option>
</select>
compareByID(itemOne, itemTwo) {
return itemOne && itemTwo && itemOne.ID == itemTwo.ID;
}
See: https://github.com/angular/angular/pull/13349
请参阅:https://github.com/angular/angular/pull/13349
Example Compare select options: http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/
示例比较选择选项:http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/
Note: this support is added in Angular4
注意:此支持是在Angular4中添加的
[ngValue]="..."
is supposed to be used with [(ngModel)]
. [selected]
doesn't work with [ngValue]
.
[ngValue]=“...”应该与[(NgModel)]连用。[选定]不适用于[ngValue]。
Update your select tag as below, ngModel will hold selected value
如下所示更新您的选择标记,ngModel将保存所选值
<select [(ngModel)]="selectedItem.Page.ID" class="form-control" (change)="OnPageSelected($event.target.value)">
<option *ngFor="let page of PageCollection.Items;" value={{page.ID}}>
{{page.Name}}
</option>
</select>
Im posting my asnwer because maybe someone is getting the same behavior.
我发布我的告密者是因为可能有人也有同样的行为。
Im receiving a value from API and I need to assign to the form control then you can not assign it directly. You need to use the same availableStores
instance array and find the value inside.
Thats the way to get [ngValue]
works perfectly.
我正在从API接收一个值,我需要分配给表单控件,那么您不能直接分配它。您需要使用相同的availableStores实例数组并在其中找到值。这是让[ngValue]完美工作的方法。
control.setValue(this.availableStores.find(
store => store.name === this.valueFromAPI.name
));
<select
class="form-control"
formControlName="homeStore"
>
<option
*ngFor="let store of availableStores"
[ngValue]="store">
{{store.name}}
</option>
</select>
Reference https://angular.io/api/forms/SelectControlValueAccessor check the first example.
Reference https://angular.io/api/forms/SelectControlValueAccessor检查第一个示例。
Add a
添加
[ngModel]="yourDefaultObject"
to your select and same for the first option
设置为您选择的选项,并且与第一个选项相同
In Angular, using Reactive Forms, with a select that has [ngValue] set up in the options, if you wanted to programmatically set the currently-selected option using Typescript from the associated Component, you can do it in this manner:
在角度上,使用反应形式,在选项中设置了[ngValue]的选择,如果要使用关联组件中的类型脚本以编程方式设置当前选定的选项,则可以按以下方式完成:
this.myReactiveForm.controls["mySelectControlName"].setValue( desiredValue );
更多回答
So, any suggestions how to solve this problem in reactive forms?
那么,有什么建议可以用被动的形式来解决这个问题呢?
In reactive form you assign the value to the control instance. [selected]
is not related to reactive forms.
在反应式形式中,您将值分配给控件实例。[选定]与反应表单无关。
How do you set selected value in reactive forms? API please? tx Sean
如何在反应性表单中设置选定值?请给我API好吗?TX肖恩
this.myForm.get('mycontrol').setValueAndValidity(newValue)`
This.myForm.get(‘mycontrol’).setValueAndValidity(newValue)`
I found angular.io/api/forms/SelectControlValueAccessor
我找到了angular.io/api/forms/SelectControlValueAccessor
This doesn't work for reactive forms
这对反应形式不起作用
This doesn't work for reactive forms
这对反应形式不起作用
我是一名优秀的程序员,十分优秀!