Angular4-양식 제어를위한 값 접근자가 없음

Angular4-양식 제어를위한 값 접근자가 없음

---

사용자 정의 요소가 있습니다.

<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을 추가하려고하면 오류 메시지가 나타납니다.

오류 오류 : 이름이 'surveyType'인 양식 제어에 대한 값 액세서가 없습니다.

나는 ngDefaultControl성공하지 않고 추가하려고했습니다 . 입력 / 선택이 없기 때문에 ... 어떻게 해야할지 모르겠습니다.

누군가가 전체 카드를 클릭 할 때 내 '유형'을 formControl에 넣을 수 있도록 클릭을이 formControl에 바인딩하고 싶습니다. 가능합니까?

---

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

인터페이스 구현

따라서 원하는 ControlValueAccessor것을 수행하려면 을 구현하는 구성 요소를 만들어야합니다. 즉 , 다음 세 가지 기능을 구현해야합니다 .

• writeValue (모델에서 뷰로 값을 쓰는 방법을 Angular에게 알려줍니다)
• registerOnChange (뷰가 변경 될 때 호출되는 핸들러 함수를 등록합니다)
• registerOnTouched (컴포넌트가 터치 이벤트를 수신 할 때 호출 될 핸들러를 등록하며, 컴포넌트가 포커스되었는지 여부를 아는 데 유용합니다).

공급자 등록

그런 다음 Angular 에이 지시문이 ControlValueAccessor(유형 스크립트가 JavaScript로 컴파일 될 때 코드에서 제거되기 때문에 인터페이스를 잘라 내지 않을 것입니다)라고 알려 주어야합니다. 공급자 를 등록하면 됩니다.

공급자는 기존 값을 제공 NG_VALUE_ACCESSOR하고 사용해야합니다 . forwardRef여기도 필요합니다 . 참고 NG_VALUE_ACCESSOR해야한다 멀티 제공 .

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

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

용법

구성 요소를 사용할 준비가되었습니다. 함께 템플릿 기반의 형태 , ngModel결합은 정상적으로 작동합니다.

으로 반응 형태 , 당신은 지금 제대로 사용할 수 있습니다 formControlName예상대로 폼 컨트롤이 작동합니다.

자원

• Thoughtram에 의해 각도 로 사용자 정의 양식 컨트롤
• Cory Rylan의 반응성 양식 및 NgMode 를 사용한 각도 사용자 정의 양식 컨트롤

---

난 당신이 사용한다고 생각 formControlName="surveyType"온 inputA의하지div

참고 URL : https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control