Как использовать ngModel с настраиваемым элементом управления внутри формы?

Question

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

В чем проблема с моим кодом? Как я могу это исправить?

• testOption: массив объектов, которые я прошел, выбрал поле выбора с @Input.

здесь выберите поле компонента:

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'input-select', 
    template:` 
     <div class="field-select"> 
     <span><icon name="select-arrow" size="10"></icon></span> 
     <select name="{{name}}" class="field"> 
      <option value="0" disabled selected>{{label}}</option> 
      <option *ngFor="let option of options" [ngValue]="option.value">{{option.name}}</option> 
     </select> 
     </div> 
    ` 
}) 
export class InputSelectComponent implements OnInit { 
    @Input() label: string; 
    @Input() name: string; 
    @Input() options; 


    // testOptions = [ 
    // {value:'test',name:'test2'}, 
    // {value:'test',name:'test2'} 
    // ]; 

    constructor() { } 

    ngOnInit() { 
     console.log(this.options); 
    } 

} 

Использование в HTML:

<input-select label="test" name="select2" [options]="testOption"></input-select> 

формы HTML:

<form role="form" class="form" #f="ngForm" (ngSubmit)="onSubmit(f)"> 
    <input class="field" name="name" ngModel type="text" placeholder="n1"> 
    <input-select label="b2" name="select2" [options]="testObject"></input-select> 
    <input class="field" name="building-type" type="text" ngModel placeholder="b3"> 
</form> 

консоли журнала: (нет выбора значения коробки)

Object {name: "test", building-type: "tset" } 

Answer 1

Наверно, у меня есть твоя проблема сейчас.

Вы хотите ввести ControlValueAccessor на свой пользовательский компонент, чтобы использовать его внутри формы с помощью ngModel!?

Ваш компонент должен выглядеть следующим образом:

@Component({ 
    selector: 'ng2-input-select', 
    template: ` 
     <div class="field-select"> 
     <select name="{{ name }}" class="field" [(ngModel)]="value" (ngModelChange)="_onChange($event)"> 
      <option value="" disabled selected>{{ label }}</option> 
      <option *ngFor="let option of options" [value]="option.value">{{ option.name }}</option> 
     </select> 
     </div> 
    `, 
    providers: [ 
     { /* idk why or what this will do exactly.. but it works! ;) */ 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => SelectBoxComponent), 
     multi: true 
     } 
    ] 
}) 
export class SelectBoxComponent implements OnInit, ControlValueAccessor { 
    @Input() label: string; 
    @Input() name: string; 
    @Input() options; 
    @Input() value: string = ''; 

    // ControlValueAccessor implementation 
    // ==================================== 

    // call if value was changed inside our component 
    private _onChange = (_: any) => { }; 
    // call if input was "touched" .. ! 
    private _onTouched =() => { }; 

    // incoming change.. 
    public writeValue(val: any) { 
    this.value = val; 
    } 

    public registerOnChange(fn: (_: any) => void): void { this._onChange = fn; } 
    public registerOnTouched(fn:() => void): void { this._onTouched = fn; } 
} 

живой демо: https://plnkr.co/edit/imCJmCoJaeGQiUMcyBwz?p=preview

UPDATE

Использование обнаружения изменений в вашей форме-компонента:

<ng2-input-select ngModel (ngModelChange)="selectBoxChanged($event)" label="b2" name="select2" [options]="testObject"></ng2-input-select> 

Answer 2

попробовать [value]="option.value", кстати могли бы вы показать вашу консоль слишком

Answer 3

Вы должны связать ngModel как один из атрибутов вашего выбора. затем напечатайте значение ngModel в консоли.