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 }
}

host ngControl可以从injector获取，如injector.get(NgControl)。 ngControl 有我想要的 errors 个对象。

Angular2 自定义表单控件，包括文本字段和错误消息

Angular2 custom form control including textfield and error message

angular2-forms

angular