Angular 7 中没有名称错误的表单控件的值访问器

Question

我正在使用 Angular 7。我有父子组件，如下面的 Stackblitz。但是，我从子组件中提供formControlName。当我写“id”而不是formControlName 时，一切正常。但是，当我写formControlName 时，它给了我错误No value accessor for form control with name: 'brand'

STACKBLITZ

我将在其他帖子中看到的这段代码添加到 app.module.ts 以解决问题，但它不起作用。

providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyChildComponentComponent),
  }
]

Answer 1

让你的应用组件像：

<app-my-child-component formControlName="brand"></app-my-child-component>

在不在模块上的组件中添加提供者，并在那里实现“ControlValueAccessor”方法。

@Component({
  selector: 'app-my-child-component',
  templateUrl: './my-child-component.component.html',
  styleUrls: ['./my-child-component.component.css'],
  providers:
    [ { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyChildComponentComponent),
  }],
})
export class MyChildComponentComponent implements ControlValueAccessor {
  value: string;
  onChange() {}
  onTouched() {}
  isDisabled: boolean = false;

  writeValue(value) {
    this.value = value
  }

  registerOnChange(fn) {
    this.onChange = fn
  }

  registerOnTouched(fn) {
    this.onTouched = fn
  }

  setDisabledState(isDisabled) {
    this.isDisabled = isDisabled;
  }

}

child component 不需要其他形式，它会是这样的：

<input 
  [value]="value"
  (input)="onChange($event.target.value)"
  (blur)="onTouched()"
  [disabled]="isDisabled"
  type="text">

在这里查看堆栈闪电战：https://stackblitz.com/edit/angular-formgroup-ccj26w?file=src%2Fapp%2Fmy-child-component%2Fmy-child-component.component.ts