Angular2カスタムコンポーネントボタンが外部フォームに接続できません

Question

問題があります。

カスタムコンポーネントにはformControlNameをリセットするボタンがありますが、それは機能しません。 私のカスタムコンポーネントの値は安いですが、この値はformControlNameに接続しません。

例：https://plnkr.co/edit/r6BBF3?p=preview

私のカスタムコンポーネント：

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { 
 
    provide: NG_VALUE_ACCESSOR, 
 
    useExisting: forwardRef(() => CustomInputComponent), 
 
    multi: true 
 
}; 
 

 
@Component({ 
 
    selector: 'custom-input', 
 
    template: `<div class="form-group"> 
 
        <label><ng-content></ng-content> 
 
         <input [(ngModel)]="value" 
 
           class="form-control" 
 
           (blur)="onBlur()" > 
 
        </label> 
 
        <button type="button" (click)="clear()">clear</button> 
 
       </div>`, 
 
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] 
 
}) 
 
export class CustomInputComponent implements ControlValueAccessor { 
 

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

 
    //get accessor 
 
    get value(): any { 
 
     return this.innerValue; 
 
    }; 
 

 
    //set accessor including call the onchange callback 
 
    set value(v: any) { 
 
     if (v !== this.innerValue) { 
 
      this.innerValue = v; 
 
      this.onChangeCallback(v); 
 
     } 
 
    } 
 

 
    //Set touched on blur 
 
    onBlur() { 
 
     this.onTouchedCallback(); 
 
    } 
 
    
 
    clear(){ 
 
     this.innerValue = ''; 
 
    } 
 

 
    //From ControlValueAccessor interface 
 
    writeValue(value: any) { 
 
     if (value !== this.innerValue) { 
 
      this.innerValue = value; 
 
     } 
 
    } 
 

 
    //From ControlValueAccessor interface 
 
    registerOnChange(fn: any) { 
 
     this.onChangeCallback = fn; 
 
    } 
 

 
    //From ControlValueAccessor interface 
 
    registerOnTouched(fn: any) { 
 
     this.onTouchedCallback = fn; 
 
    } 
 

 
}

Answer 1

この

clear(){ 
    this.innerValue = ''; 
    this.onChangeCallback(''); 
} 

がPlunker