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

2022 6/02

2022年6月2日

URLをコピーしました！

悩んでいる男の子

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

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

本記事の内容

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

本記事の執筆者

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

いずみん

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

プログラミングを学びたい方必見！

オンライン特化のプログラミングスクールなら「TechAcademy [テックアカデミー] 」が超おススメ！

副業としてプログラミングを学びたい方にもおすすめのスクールです！

初心者が9割以上なので挫折せずに学べる！
受講者に副業の仕事を1案件以上斡旋！ ※条件あり
オンライン完結型なので、在宅でもお仕事可！
プロのメンターがサポートしてくれる！

キャリアカウンセリングやメンター相談が無料でできるのもおすすめポイントです！

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

原因は？

詳細は分かりませんが、子コンポーネントが「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インターフェースです。

公式