Valeur non propagée à partir du contrôle personnalisé avec ControlValueAccessor

Question

J'ai ce contrôle personnalisé qui comprend un composant sélectionné. Mais dans ma forme réactive, la valeur n'est jamais propagée.

Quelqu'un peut-il m'aider avec ça?

Mon contrôle personnalisé:

const SOME_SELECT_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => SomeSelectComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'some-select', 
    template: ` 
    <select class="form-control"> 
    <option value="" disabled>Bitte wählen sie einen Eintrag aus aus</option> 
    <option *ngFor="let item of optionItems" value="{{ item.id }}"> 
    {{ item.name }} 
    </option> 
</select> 
    `, 
    providers: [SOME_SELECT_VALUE_ACCESSOR] 
}) 
export class SomeSelectComponent implements OnInit, ControlValueAccessor { 

    private _value: any; 

    @Input() optionItems: Array<OptionItem> = []; 

    private onTouchedCallback:() => void; 
    private onChangeCallback: (_: any) => void; 

    ngOnInit(): void { 
    } 

    writeValue(obj: any): void { 
    console.log(obj); 
    if (this._value !== obj) { 
     this._value = obj; 
    } 
    } 

    registerOnChange(fn: any): void { 
    this.onChangeCallback = fn; 
    } 

    registerOnTouched(fn: any): void { 
    this.onTouchedCallback = fn; 
    } 

} 

export interface OptionItem { 
    key: String; 
    value: String; 
} 

A plnkr: https://plnkr.co/edit/VNflDbpMm1VmfIHcMcXr?p=preview

Answer 1

Parce que vous ne l'appelez pas le onChangeCallback lorsque la valeur est modifiée:

<select class="form-control" (change)="change(select.value)" #select> 

change(val) { 
    this.onChangeCallback(val); 
} 

Maintenant vous pouvez voir la valeur de contrôle modifiée.

La seconde deuxième chose que vous manquez est de mettre à jour la boîte de sélection du modèle au modèle, dans mon plunker j'ai également ajouté la solution.

travail plunker: https://plnkr.co/edit/C5mwsDre8OCkWYCDOF4i?p=preview

Answer 2

Plunker example

<select class="form-control" (change)="writeValue($event.target.value)"> 

Une autre approche

Plunker example

<select class="form-control" [ngModel]="_value" (ngModelChange)="writeValue($event)"> 
<option [ngValue]="null" disabled>Bitte wählen sie einen Eintrag aus aus</option>