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