Angular2 RC2 ControlValueAccessor 구현

Question

내가 ControlValueAccessor 인터페이스를 사용하여 사용자 정의 컨트롤이 깨진,하지만 다음과 같은 예외 얻을 (RC1에서) angular2 RC2로 업그레이드 이후 :

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in templates/assetDefinition/options-editor-select.component.html:3:15 
ORIGINAL EXCEPTION: No value accessor for '' 
ORIGINAL STACKTRACE: Error: No value accessor for '' 
at new BaseException (http://localhost:5000/js/app-es6.js:4129:23) 
at _throwError (http://localhost:5000/js/app-es6.js:39145:11) 
at Object.setUpControl (http://localhost:5000/js/app-es6.js:39120:9) 
at NgModel._addStandaloneControl (http://localhost:5000/js/app-es6.js:38205:18) 
at NgModel._addControl (http://localhost:5000/js/app-es6.js:38201:18) 
at NgModel.ngOnChanges (http://localhost:5000/js/app-es6.js:38159:18) 
at DebugAppView._View_OptionsEditorSelectComponent0.detectChangesInternal (OptionsEditorSelectComponent.template.js:120:47) 
at DebugAppView.AppView.detectChanges (http://localhost:5000/js/app-es6.js:32254:14) 
at DebugAppView.detectChanges (http://localhost:5000/js/app-es6.js:32359:44) 
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:5000/js/app-es6.js:32280:19) 

내 구성 요소 코드입니다 (BaseComponent 그냥 설정 일부 다음 템플릿

import {Component, Output, EventEmitter, Provider, forwardRef} from '@angular/core'; 
import {ControlValueAccessor, NG_VALUE_ACCESSOR, CORE_DIRECTIVES} from '@angular/common'; 

import {BaseComponent} from '../Components/base.component'; 

const TAG_CREATOR_CONTROL_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, 
    { 
     useExisting: forwardRef(() => TagCreatorComponent), 
     multi: true 
    }); 

@Component({ 
    selector: 'tag-creator', 
    templateUrl: 'templates/shared/tag-creator.component.html', 
    directives: [CORE_DIRECTIVES], 
    providers: [TAG_CREATOR_CONTROL_VALUE_ACCESSOR] 
}) 

export class TagCreatorComponent extends BaseComponent implements ControlValueAccessor{ 
    constructor() { 
     super(); 
    } 
    @Output() change = new EventEmitter(); 

    private _values: string[]; 
    private _onTouchedCallback:() => void =() => undefined 
    private _onChangeCallback: (val: string[]) => void =() => undefined 
    get values(): string[] { 
     return this._values; 
    } 
    set values(s: string[]) { 
     if (s !== this.values && !s.every(x => this.values.indexOf(x) > -1)) { 
      this._values = s; 
      this._onChangeCallback(s); 
     } 
    } 
    onTouched() { 
     this._onTouchedCallback(); 
    } 
    newTag: string = ""; 
    valueIsValid: boolean = true; 
    input(event) { 
     const tag = event.target.value.trim(); 
     this.valueIsValid = this.values.indexOf(tag) === -1; 
    } 
    keyPress(event) { 
     if (event.keyCode === 13 && this.isValid) { 
      this.values.push(this.newTag); 
      this.newTag = ""; 
      this._onChangeCallback(this.values); 
      this.change.emit(this.values); 
     } 
    } 
    removeTag(tag) { 
     this.values.splice(this.values.indexOf(tag), 1); 
     this._onChangeCallback(this.values); 
     this.change.emit(this.values); 
    } 
    writeValue(value: string[]) { 
     this._values = value; 
    } 
    registerOnChange(fn: any) { 
     this._onChangeCallback = fn; 
    } 
    registerOnTouched(fn: any) { 
     this._onTouchedCallback = fn; 
    } 
} 

:

<div class="tag-creator"> 
    <div class="tag-holder"> 
     <div class="tag" *ngFor="let tag of values"> 
      <span>{{tag}} <i class="fa" (click)="removeTag(tag)">{{icons.cross}}</i></span> 
     </div> 
    </div> 
    <input class="tag-input form-control input-sm" 
      [(ngModel)]="newTag" 
      (input)="input($event)" 
      (keypress)="keyPress($event)" 
      [class.input-success]="valueIsValid" 
      [class.input-danger]="!valueIsValid"/> 
</div> 

,536 '아이콘')와 같은 속성

공식 changelog을 확인했으며 프레임 워크의이 부분에 대한 변경 사항은 언급되어 있지 않습니다. 보시다시피 변경된 양식 API를 사용하지 않으므로 어떤 문제도 예상하지 못했습니다.

Answer 1

NG_VALUE_ACCESSOR 및 ControlValueAccessor을 @angular/forms에서 가져와야합니다.