Angular 폼 컨트롤의 'No value accessor' 오류 해결하기
Angular에서 폼 컨트롤을 사용할 때 "No value accessor for form control with unspecified name attribute" 오류가 발생하는 경우가 있습니다. 이 오류는 주로 커스텀 폼 컨트롤이나 서드파티 컴포넌트를 사용할 때 나타납니다. 이 글에서는 이 오류의 원인과 해결 방법을 상세히 알아보겠습니다.
1. 주요 원인
- 커스텀 폼 컨트롤에 NG_VALUE_ACCESSOR가 등록되지 않음
- 서드파티 컴포넌트가 value accessor를 제공하지 않음
- 폼 컨트롤 이름이 지정되지 않음
- 모듈 임포트 누락
2. 해결 방법
2.1 NG_VALUE_ACCESSOR 등록
커스텀 폼 컨트롤의 경우, NG_VALUE_ACCESSOR를 제공해야 합니다:
@Component({
selector: 'app-switch',
template: `...`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AppSwitchComponent),
multi: true
}
]
})
export class AppSwitchComponent implements ControlValueAccessor {
// ControlValueAccessor 인터페이스 구현
}
2.2 ngDefaultControl 사용
서드파티 컴포넌트에 value accessor가 없는 경우, ngDefaultControl을 사용합니다:
2.3 폼 컨트롤 이름 지정
ReactiveFormsModule을 사용하는 경우, formControlName을 지정해야 합니다:
2.4 모듈 임포트 확인
커스텀 컴포넌트를 사용하는 모듈에서 해당 컴포넌트의 모듈을 임포트했는지 확인합니다:
@NgModule({
imports: [
AppSwitchComponentModule,
// 기타 필요한 모듈
],
// ...
})
export class AppModule { }
3. 추가 팁
- 테스트 환경에서 오류가 발생하는 경우, TestBed.configureTestingModule에서 커스텀 컴포넌트를 선언해야 합니다.
- Nx와 Module Federation을 사용하는 경우, webpack.config.js에서 @angular/forms 패키지를 공유하도록 설정해야 할 수 있습니다.
- 오류 메시지를 주의 깊게 읽고, 어떤 컴포넌트에서 문제가 발생하는지 확인하세요.
결론
"No value accessor for form control" 오류는 Angular 폼에서 자주 발생하는 문제입니다. 대부분의 경우, NG_VALUE_ACCESSOR 등록, ngDefaultControl 사용, 올바른 폼 컨트롤 이름 지정, 그리고 필요한 모듈 임포트를 통해 해결할 수 있습니다. 문제가 지속되면 컴포넌트의 구현을 자세히 검토하고, 필요한 경우 Angular 공식 문서를 참조하세요.