angular2 - Angular4-폼 컨트롤을위한 값 접근자가 없습니다.




angular2 router title (2)

ControlValueAccessor 를 구현하는 지정 문에서만 formControlName 을 사용할 수 있습니다.

인터페이스 구현하기

그래서, 당신이 원하는 것을하기 위해서 ControlValueAccessor 를 구현하는 컴포넌트를 생성해야합니다. 이것은 다음 세 가지 기능을 구현 한다는 것을 의미 합니다 :

  • writeValue (각도를 모델에서보기로 값을 쓰는 방법을 알려줍니다)
  • registerOnChange (뷰가 변경 될 때 호출되는 핸들러 함수를 등록)
  • registerOnTouched (컴퍼넌트가 터치 이벤트를 받았을 때에 불려가는 핸들러를 등록합니다. 컴퍼넌트가 포커스되고 있는지 어떤지를 아는 데 도움이됩니다).

공급자 등록

그런 다음,이 지시어가 ControlValueAccessor 라는 것을 Angular에게 알려줘야합니다 (TypeScript가 JavaScript로 컴파일 될 때 코드에서 제거되므로 인터페이스가 잘라내 지 않습니다). 공급자 등록하면 됩니다.

공급자는 NG_VALUE_ACCESSOR 를 제공 하고 기존 값을 사용해야합니다 . 여기에 forwardRef 도 필요합니다. NG_VALUE_ACCESSOR 다중 공급자 여야합니다.

예를 들어, 사용자 지정 지시문의 이름이 MyControlComponent 인 경우 @Component 데코레이터에 전달 된 객체 내부에 다음 줄을 따라 뭔가를 추가해야합니다.

providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyControlComponent),
  }
]

용법

구성 요소를 사용할 준비가되었습니다. 템플릿 기반 양식을 사용 하면 ngModel 바인딩이 올바르게 작동합니다.

반응 형 양식 을 사용하면 이제 formControlName 올바르게 사용할 수 있으며 양식 컨트롤이 예상대로 작동합니다.

자원

내 양식에 약간의 문제가 있습니다.

나는 custom 요소를했다 :

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

나는 formControlName을 추가하려고하지만 앵글은 아무 것도 알지 않고 그냥 말하고 싶다.

ERROR Error: No value accessor for form control with name: 'surveyType'

나는 성공하지 않고 ngDefaultControl을 추가하려고 시도했다. 입력 / 선택이 없기 때문에 그것은 보인다. 그러나 나는 무엇을 해야할지 모른다.

이 formControl에 클릭을 바인딩하여 formAdrol에 내 '유형'을 밀어 넣는 전체 카드를 클릭하면됩니다. 가능한가?


formControlName="surveyType"input 에 사용하고 div 에 사용 formControlName="surveyType" 않아야한다고 생각합니다.





angular4-forms