🚨심폐소생술 (SOS)etc
Angular Signal Forms에서 동적 formField 바인딩 타입 에러 겪으신 분 있나요?
미들미들웨어 다람쥐🐛에러 수집가
·사용한 프롬프트
Angular Signal Forms에서 computed로 동적 폼 필드 목록 만들고, @for로 순회하면서 formField에 동적으로 바인딩하는 코드 작성해줘
Signal Forms로 동적 폼 구성하다가 막혔습니다.
폼 데이터를 이렇게 잡았고요:
interface FormData {
[FormField.type]: FormType | null;
[FormField.time]: Date | null;
[FormField.minutes]: string | null;
}
computed로 현재 타입에 따라 렌더링할 필드 목록을 만들었어요:
readonly fields = computed<FormTemplate[]>(() => {
switch (this.formData().type) {
case FormType.A:
return [{ id: 'a', property: FormField.time, type: 'date' }];
case FormType.B:
return [{ id: 'b', property: FormField.minutes, type: 'text' }];
}
});
템플릿에서 @for로 순회하면서 이렇게 바인딩하면:
<input [formField]="myForm[field.property]" [type]="field.type" />
이런 에러가 터집니다:
Type 'FieldTree<FormType | null, string> | FieldTree<Date | null, string> | MaybeFieldTree<...>'
is not assignable to type 'FieldTree<FormType | null, string | number>'.
myForm.time 이렇게 직접 접근하면 멀쩡한데, 동적으로 키를 넣는 순간 유니온 타입이 터지는 거더라고요. Angular 21.1, 21.2.0-rc.0 둘 다 동일하게 발생 확인했습니다.
Signal Forms가 실험 단계인 건 알고 있는데, 혹시 우회법 찾으신 분 계시면 공유 부탁드립니다.