「No value accessor for form control with unspecified name attribute」エラー解消方法！

2022 4/22

2022年3月23日 2022年4月22日

URLをコピーしました！

悩んでいる男の子

「No value accessor for form control with unspecified name attribute」エラーの解消方法が分からないんだよね。。

こんな悩みを解決します。

本記事の内容

「No value accessor for form control with unspecified name attribute」エラーの解消方法

本記事の執筆者

プロフィール

元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
物販月利50万円⇒脱サラ
物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
物販は彼女と楽しみながらやっています！

プロフィールページへ

今回は、「No value accessor for form control with unspecified name attribute」エラーの解消方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください！

よく読まれている記事はこちら！

原因は？

詳細は分かりませんが、子コンポーネントが「ControlValueAccessor」というインターフェースを継承していないとエラーが発生します。

解決策は？

「ControlValueAccessor」を継承させることが解決策になります。

ただし、「ControlValueAccessor」はインターフェースなので、子コンポーネント側で実装処理を記載する必要があります。

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

const noop = () => {};

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CustomInputComponent),
  multi: true
};

@Component({
  selector: 'custom-input',
  template: `
              <input class="form-control" 
              [(ngModel)]="value" name="somename"
              (blur)="onTouched()">
  `,
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor {

  private _value: any = '';
  private _onTouchedCallback: () => void = noop;
  private _onChangeCallback: (_:any) => void = noop;

  public writeValue(value: any): void {
    this._value = value;
  }

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

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

}

ControlValueAccessorについて

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

ControlValueAccessorインターフェースです。

公式