「No value accessor for form control with unspecified name attribute」について│いずみんブログ

「No value accessor for form control with unspecified name attribute」というエラーを見たことがありますか？

このエラーはAngularの開発をする際に遭遇したエラーですが、実際そこまで問題にはなりません。

僕の場合は、画面自体は問題なく表示されていましたが、開発者ツール上でエラーが出ている状況でした。

が、気持ち悪いので解決しちゃいましょう！

1 「No value accessor for form control with unspecified name attribute」とは
2 原因は？
3 解決策は？
4 ControlValueAccessorについて
5 参考サイト
6 おすすめ本
7 まとめ

「No value accessor for form control with unspecified name attribute」とは

このエラーが発生したのは、僕がAngularの開発をしていた際に、親コンポーネントと子コンポーネントの値のやりとりを実装していた時でした。

画面自体は問題なく表示されていたのですが、開発者ツールを開くとエラーが出ていたわけです。

アクセッサがうんたらかんたらと言っていますが、正直良く分かりません。

原因は？

詳しいことは情報が少ないので分かりませんが、子コンポーネント側が「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;
  }

}

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
}

interface ControlValueAccessor {

writeValue(obj: any): void

registerOnChange(fn: any): void

registerOnTouched(fn: any): void

setDisabledState(isDisabled: boolean)?: void

}

ControlValueAccessorインターフェースの概要です。

下記サイトに記載されていますので参考までに。

・ControlValueAccessor

参考サイト

以下が参考にしたサイトです。

英語なので分かりにくいですが、翻訳を使用して何とか読み解きました。。

・Stack OverFlow

まとめ

Angularをゴリゴリ触りだして非常に便利だなと思う今日この頃ですが、変なエラーが出ると戸惑いますよね。

意外とAngularの情報って少ないんですよね、英語のサイトばっかりで。

自分のアウトプットも兼ねて情報発信しているので参考になれば幸いです。

フォローしてもらえると泣いて喜びます

フォローする

「No value accessor for form control with unspecified name attribute」について