Question

我正在使用角度7。而且我有父级和子级组件，如下Stackblitz。但是，我从子组件中给出了formControlName。何时，我写了“ id”而不是formControlName，所以一切正常。但是，当我写formControlName时，它给了我错误没有用于名称为'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

没有用于角度控制的表单控制的值访问器，角度7中的名称错误

1 个答案: