angular2 rc.5 사용자 지정 입력, 지정되지 않은 이름을 가진 양식 제어를 위한 값 접근자 없음

angular2 rc.5 사용자 지정 입력, 지정되지 않은 이름을 가진 양식 제어를 위한 값 접근자 없음

나는 이런 간단한 맞춤형 입력 구성요소를 가지고 있습니다.

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{

  //The internal data model
  private _value: any = '';

  //Placeholders for the callbacks
  private _onTouchedCallback: () => void = noop;

  private _onChangeCallback: (_:any) => void = noop;

  //get accessor
  get value(): any { return this._value; };

  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this._onChangeCallback(v);
    }
  }

  //Set touched on blur
  onTouched(){
    this._onTouchedCallback();
  }

  //From ControlValueAccessor interface
  writeValue(value: any) {
    this._value = value;
  }

  //From ControlValueAccessor interface
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  }

  //From ControlValueAccessor interface
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }

}

그리고 저는 이런 앱 모듈을 가지고 있습니다.

/**
 * Created by amare on 8/15/16.
 */
import { NgModule }                     from '@angular/core';
import { BrowserModule }                from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule }          from '@angular/forms';
import { AppComponent }                 from './app/app.component';
import {CustomInputComponent} from "./app/shared/custom.input.component";
import {RouterModule} from "@angular/router";
@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule, FormsModule, RouterModule ],
  declarations: [ AppComponent, CustomInputComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {  
}

및 본

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

아래와 같이 구성 요소 중 하나에 사용자 지정 입력을 사용했지만 '지정되지 않은 이름 속성을 가진 양식 제어를 위한 값 접근자 없음'이 표시됩니다.

<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>

그리고 app.구성 요소는 다음과 같습니다.

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';

  firstName: string;
}

호스트의 사용자 지정 입력 구성 요소에 ngDefaultControl을 추가하여 문제를 해결했습니다. 감사합니다. @daniels.

사용자 지정 입력 구성 요소에 ngDefaultControl을 추가합니다.이렇게 하면 양방향 데이터 바인딩이 추가되므로 고유한 작업을 수행하는 경우가 아니면 값 액세스 방법을 구현할 필요가 없습니다.

<custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>

더하다ngDefaultControl당신의 의견에. 예. 예를 들어.

<inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)" value="valor" ngDefaultControl> </inline-editor> 

그리고나서import { FORM_DIRECTIVES } from '@angular/common';

마지막 지침:[FORM_DIRECTIVES]

이것은 효과가 있을 것입니다 :) 위의 의견에 감사드립니다.

나는 넣었습니다.[(ngModel)]나의<option>대신 태그 지정<select>

그래서 그래요...그것이 이것을 야기할 것입니다.

이런 일이 발생하는 또 다른 시나리오에서, 저는[(ngModel)]최근에 재구성되고 단순화된 사용자 지정 구성 요소에 지정되었으며, 새로운 버전의 구성 요소가 방금 포함되었습니다.ngModel방출이 있는 일반 입력 변수로 사용됩니다.

이 값으로는 충분하지 않습니다. 입력 변수의 이름을 다른 값으로 변경해야 합니다.ngModel또는 구성 요소가 다음을 구현해야 합니다.ControlValueAccessorinterface(자세한 내용은 설명서 참조).하나 또는 다른 하나가 완료되면 더 이상 이 오류가 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified