日々更新中です!

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

  • 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インターフェースです。

まとめ

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

意外とハマりました。。

ではまた!

まとめ
  • 「No value accessor for form control with unspecified name attribute」エラーの解消方法は、「ControlValueAccessor」を継承すること。
  • おすすめ本はこちら!
いずみん

僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!

  • 関連記事
  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる