Question

所以，我试图在角度4中创建一个自定义表单组件，我添加了ngModel工作所需的一切，但它没有。

这是我的孩子组成部分：

export class Search extends ControlValueComponent {

}

它扩展到ControlValueComponent类，它处理所有＆＃34; ControlValueAccesor＆＃34;。

这是ControlValueAccesor类：

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
import {forwardRef, Input} from "@angular/core";

export class ControlValueComponent implements ControlValueAccessor {

  @Input() disabled: boolean;

  innerValue: any = '';

  static providerValueAcessor( ref: any): any {
    return [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ref), multi: true }
    ];
  }

  onTouchedCallback: () => void = () => {};

  onChangeCallback: (_: any) => void = () => {};

  constructor() {
  }

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

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

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}

为了让提供者正确，我使用函数ProviderValueAccesor（在ControlValueComponent中），就像这样

providers: ControlValueComponent.providerValueAcessor(SysSearch)

但是当我向我的子组件添加[（ngModel）]时，它不断收到ngModel不是组件属性的错误

我试着像这样使用它：

<search [(ngModel)] = 'value'><search>

Answer 1

在您的类文件中导入FormsModule：

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
---->
import {ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule} from "@angular/forms";

Answer 2

我已经解决了这个问题。

我需要直接在调用子组件的父组件上导入FormsModule，以便ngModel正常工作......我是这样做的：

import {FormsModule} from "@angular/forms";


@NgModule({
  imports: [
    FormsModule,
    SearchModule
  ]

这样，父组件就可以使用ngmodel属性。谢谢你的帮助

无法绑定ngModel，因为它不是＆＃34;组件＆＃34;的属性。

2 个答案: