Angular2自定义窗体控件包括文本框和错误消息

Question

我想写一个自定义窗体控件，包括一个文本框和一个错误消息工具提示，它与模型驱动窗体一起工作。

在RC5上，下面的代码很可能工作得很好，但在2.0时，它不会。 https://embed.plnkr.co/bvFbsf5q74j7eHWuh5y7/

有没有办法建立与主机formControl和子ngModel， 或从内部访问主机formControl的关系？

否则，有没有办法实现这个想法？

Answer 1

我找到了方法。

最后，我的代码变成这样。

@Component({ 
    selector: 'custom-input', 
    template: ` 
    <input type="text" [required]="required" [(ngModel)]="value" #model="ngModel"/> 
    <div>inner ngModel errors: {{model.errors|json}}</div> 
    <div>ngControl errors: {{ngControl.errors|json}}</div> 
    `, 
    providers: [{ 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => CustomInput), 
    multi: true 
    }] 
}) 
export class CustomInput implements ControlValueAccessor, OnInit { 
    private innerValue: any = ''; 
    private ngControl: NgControl; 

    @Input() required: boolean; 

    private onTouchedCallback =() => {}; 
    private onChangeCallback = (_: any) => {}; 

    constructor(private injector: Injector) { } 

    ngOnInit(): void { 
     this.ngControl = this.injector.get(NgControl); 
    } 

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

    set value(v: any) { 
     if (v !== this.innerValue) { 
      this.innerValue = v; 
      this.onChangeCallback(v); 
     } 
    } 

    onBlur() { this.onTouchedCallback() } 

    writeValue(value: any) { 
     if (value !== this.innerValue) { 
      this.innerValue = value; 
     } 
    } 
    registerOnChange(fn: any) { this.onChangeCallback = fn } 
    registerOnTouched(fn: any) { this.onTouchedCallback = fn } 
} 

主机ngControl可以从注入器获得，如injector.get(NgControl)。 而ngControl有errors我想要的对象。