Как установить начальное значение угла 2 Реактивный выбор

Question

У меня есть список выбора, который я хочу ввести в значение, сохраненное значение, возвращаемое с сервера. Но что бы я ни старался, я не могу заставить его использовать выбранное значение.

Я использую Угловой 2.2.0 и Реактивные формы.

Вот список значений для списка выбора.

private categoryList: ICategory[] = [ 
    new Category({ id: 1, name: 'Cat 1' }), 
    new Category({ id: 2, name: 'Cat 2' }), 
    new Category({ id: 3, name: 'cat 3' }) 
]; 

Сохраненная значение:

{ id: 1, name: 'Cat 1' } 

Использование FormBuilder я создать форму

this.itemForm = this.fb.group({ 
     name: [null, Validators.required], 
     description: [null, Validators.required], 
     weight: [null, Validators.required], 
     dimensions: [null, Validators.required], 
     category: [null, Validators.required] 
    }); 

я отформатируйте ее с сохраненными данными

(<FormGroup>this.itemForm) 
     .setValue({ 
      name: item.name, 
      description: item.description, 
      weight: item.weight, 
      dimensions: item.dimensions, 
      category: item.category 
     }, { onlySelf: true }); 

Шаблон выглядит следующим образом

<select name="category" [formControl]="itemForm.controls['category']"> 
     <option [selected]="itemForm.controls['category'].value == null" value="">-- Select --</option> 
     <option *ngFor="let cat of categories" [ngValue]="cat"> 
      {{cat.name}} 
     </option> 
    </select> 
{{itemForm.controls['category'].value | json }} 

Ожидаемый результат Название элемента одного выбранного в избранных и соответствует текст в формате JSON отображается под шаблон

Фактическое поведение JSON показывает это:

{ "id": 1, "name": "Cat 1" } 

Но ничего не выбрано в выберите

Если --Выбор-- выбран обновления JSON правильно «».

Если выбрана другая кошка, JSON также обновляется правильно.

Что я делаю неправильно, как инициализировать выбор?

EDIT Я также попытался это:

<option *ngFor="let cat of categories" [selected]="itemForm.controls['category'].value.id == cat.id" [ngValue]="cat"> 

Answer 1

Если вы правильно поняли, вы хотите установить значение по умолчанию. Затем вы можете просто обратиться к своему item.category + указателю значения, которое вы хотите установить.

Я бы установил значения, подобные этому, где мы установили первый элемент в качестве значения по умолчанию.

setValues() { 
    this.itemForm 
     .setValue({ 
      name: item.name, 
      category: item.category[0].id 
     }) 
} 

, а затем использовать formGroup и formControlName в форме, так:

<form [formGroup]="itemForm"> 
    <input formControlName="name"/> 
    <small *ngIf="!itemForm.controls.name.valid">Name is required!</small> 
    <!-- More code --> 
    <select formControlName="category"> 
    <! -- set ngValue to cat.id --> instead of just cat! 
    <option *ngFor="let cat of categories" [ngValue]="cat.id"> 
     {{cat.name}} 
    </option> 
    </select> 
</form> 

Установите [ngValue] (или использовать только [value]) либо cat.name или cat.id в зависимости от того, что вы хотите использовать, так что если вы используете ngValue, что не связывает весь объект!

Работает Plunker. Не зная, где вы устанавливаете значения, в этот момент я сделал кнопку setValues в плункере, которая имитирует, если значения установлены позже.

Надеюсь, что эта помощь!

Answer 2

Попробуйте использовать [attr.selected] и [attr.value] вместо [выбор] и [ngValue].

Answer 3

Попробуйте этот код. Он работает Угловой 5

<select formControlName="category"> 
<option [ngValue]="undefined" selected disabled>Select Type</option> 
    <option *ngFor="let cat of categories" [ngValue]="cat.id"> 
     {{cat.name}} 
    </option> 
    </select>