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对象。

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

1 个答案: