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

「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
}