仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

「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」エラーの解消方法
  • 本記事の執筆者
いずみん(@izumin_0401)

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

いずみん

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

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

オンライン特化のプログラミングスクールなら「」が超おススメ!

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

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

まとめ

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

意外とハマりました。。

ではまた!

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

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

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

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

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

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

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

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