타입이 지정된 반응형 폼
엄격한 타입 검사를 적용한 폼을 만듭니다.
타입이 지정된 반응형 폼은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
타입이 지정된 폼을 사용하는 이유
Angular 14 이전에는 반응형 폼 값의 타입이 any였습니다. 타입이 지정된 반응형 폼을 사용하면 완전한 타입 안전성을 얻을 수 있습니다. 컴파일러가 폼 값의 구조와 컨트롤 이름을 알 수 있기 때문입니다.
타입이 지정된 FormControl
FormControl은 제네릭입니다. 값을 읽고 쓸 때 검사되도록 값의 타입을 지정하세요.
const name = new FormControl<string>('', {
nonNullable: true
});타입이 지정된 FormGroup
FormGroup은 전달된 컨트롤에서 값의 타입을 추론합니다.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});추론된 값의 타입
위 그룹의 value는 { email: string | null; age: number | null } 타입으로 지정되며, 모든 내용이 컴파일 시점에 검사됩니다.
const v = form.value; // typed automatically널 허용 여부
기본적으로 컨트롤은 null로 재설정할 수 있으므로 값의 타입에 | null이 포함됩니다. null을 제외하려면 nonNullable을 사용하세요.
new FormControl('', { nonNullable: true });
// value type: string (no null)안전하게 컨트롤에 접근하기
form.controls.email은 강력한 타입이 적용되므로 컨트롤 이름의 오타를 컴파일러가 찾아냅니다.
form.controls.email.setValue('a@b.com');get과 controls
타입 안전성을 위해 form.get('name')보다 form.controls.name을 사용하세요. get은 느슨하게 타입이 지정된 AbstractControl | null을 반환합니다.
getRawValue
getRawValue()는 비활성화된 컨트롤을 포함한 모든 값을 반환합니다. 반면 value는 비활성화된 컨트롤을 제외합니다.
const all = form.getRawValue();중첩 그룹
타입이 지정된 그룹은 조합할 수 있습니다. 중첩된 FormGroup은 자체적으로 타입이 지정된 구조를 부모 값에 추가합니다.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});patchValue의 타입 안전성
patchValue는 폼 값의 일부만 받으며, 알 수 없는 키는 컴파일러가 오류로 표시합니다.
form.patchValue({ email: 'x@y.com' });기존 폼 마이그레이션하기
점진적인 마이그레이션을 위해 UntypedFormGroup과 같은 타입 미지정 API를 사용할 수 있습니다. 새 코드는 안전성을 위해 타입이 지정된 클래스를 사용해야 합니다.
빠른 확인
타입이 지정된 반응형 폼에 대한 이해도를 확인해 보세요.
복습
타입이 지정된 반응형 폼을 사용하면 FormControl/FormGroup이 제네릭이 되어 검사된 값의 구조를 추론한다는 것을 배웠습니다. 기본적으로 | null이 포함되지만 nonNullable로 피할 수 있으며, controls로 접근하는 것이 get보다 안전합니다.
자주 묻는 질문
“타입이 지정된 반응형 폼” 강의는 무료인가요?
네 — “타입이 지정된 반응형 폼” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“타입이 지정된 반응형 폼”에서 뭘 배우나요?
엄격한 타입 검사를 적용한 폼을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“타입이 지정된 반응형 폼” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 타입이 지정된 반응형 폼
- FormArray와 동적 필드
- 비동기 유효성 검사기
- FormBuilder 패턴