在select标签中使用[ngValue]和[selected]

Question

我正在尝试使用[selected]和[ngValue]来设置表单中包含对象的select标签的默认值。但出于某种原因它们似乎不兼容。

示例代码：

<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>

这段代码的默认值只会显示为空白。如果我删除 [ngValue]，它可以正常工作，但选择的将是 store.name 值，而不是 store 对象。

您有什么建议吗？

- TheFisherman

Answer 1

你可以在[ngValue]中使用compareWith。 例如：

<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;
}

请参见：https://github.com/angular/angular/pull/13349

示例：比较选择选项：http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/

注意：此功能已添加到Angular4中。

- Touqeer Shafi

Answer 2

[ngValue]="..."应该与[(ngModel)]一起使用，[selected]不能与[ngValue]一起使用。

- Günter Zöchbauer

---

那么，在响应式表单中有什么建议来解决这个问题吗？ - TheFisherman

在响应式表单中，您将值分配给控件实例。[selected]与响应式表单无关。 - Günter Zöchbauer

如何在响应式表单中设置选定的值？请提供API。谢谢，Sean。 - born2net

this.myForm.get('mycontrol').setValueAndValidity(newValue)` - Günter Zöchbauer

我发现了angular.io/api/forms/SelectControlValueAccessor。 - Günter Zöchbauer

Answer 3

请按以下方式更新您的选择器标签，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>

- Sandip - Frontend Developer

---

这对于响应式表单无效。 - Florestan Korp

Answer 4

我发布我的答案，因为也许有人遇到了相同的问题。 我从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>

请参考https://angular.io/api/forms/SelectControlValueAccessor，查看第一个示例。

- Abel Valdez

Answer 5

添加一个

[ngModel]="yourDefaultObject"

对于您的选择，第一个选项也是如此

- Juany

---

这对于响应式表单无效。 - Florestan Korp

Answer 6

在Angular中，使用响应式表单，如果您想要通过Typescript从相关组件中以编程方式设置当前选中的选项，可以按照以下方式进行操作：在选项中设置[ngValue]，然后进行设置。

this.myReactiveForm.controls["mySelectControlName"].setValue( desiredValue );

- StackOverflowUser