# 템플릿 기반 폼 (Angular)

> FormsModule, NgModel, 양방향 바인딩, 폼 유효성 검사, ngForm, 템플릿 참조 변수, 유효성 검사 상태

- 16 면접 질문
- Mid-Level
- [면접 질문: Angular](https://sharpskill.dev/ko/technologies/angular/interview-questions.md)

## 1. 템플릿 기반 폼을 사용하기 위해 가져올 Angular 모듈은 무엇입니까?

**답변**

FormsModule는 Angular에서 템플릿 기반 폼을 활성화하는 데 필요합니다. NgModel, NgForm과 같은 디렉티브를 제공하고 [(ngModel)]을 사용한 양방향 데이터 바인딩을 가능하게 합니다. 이 모듈이 없으면 폼 디렉티브가 작동하지 않으며 Angular는 오류를 발생시킵니다.

## 2. NgModel로 양방향 데이터 바인딩을 위해 어떤 구문을 사용합니까?

**답변**

[(ngModel)] 구문은 프로퍼티 바인딩 [ngModel]과 이벤트 바인딩 (ngModel)을 결합하여 양방향 데이터 바인딩을 생성합니다. 이 banana-in-a-box 구문은 폼 필드 값과 컴포넌트 프로퍼티를 양방향으로 자동 동기화하여 폼 상태 관리를 단순화합니다.

## 3. 템플릿 기반 폼에서 NgModel을 사용하는 input에 필수인 속성은 무엇입니까?

**답변**

name 속성은 템플릿 기반 폼에서 NgModel을 사용하는 각 input에 필수입니다. Angular는 이 속성을 사용하여 기본 FormGroup에 컨트롤을 등록하고 폼 구조를 만듭니다. name 속성이 없으면 Angular는 컨트롤 상태를 추적할 수 없고 오류를 발생시킵니다.

## 13개 추가 질문 이용 가능

- 폼 상태를 확인하기 위해 NgForm 디렉티브에 어떻게 접근합니까?
- 템플릿에서 특정 필드의 상태에 어떻게 접근합니까?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 Angular 면접 주제

- [TypeScript 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-basics.md): 25개 질문, Junior
- [TypeScript 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-advanced.md): 20개 질문, Junior
- [Angular 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-fundamentals.md): 20개 질문, Junior
- [컴포넌트와 라이프사이클](https://sharpskill.dev/ko/technologies/angular/interview-questions/components-lifecycle.md): 20개 질문, Junior
- [Services & Dependency Injection](https://sharpskill.dev/ko/technologies/angular/interview-questions/services-dependency-injection.md): 20개 질문, Junior
- [Angular 모듈 구성](https://sharpskill.dev/ko/technologies/angular/interview-questions/modules-organization.md): 22개 질문, Mid-Level
- [Angular CLI](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-cli.md): 18개 질문, Junior
- [디렉티브와 Pipe](https://sharpskill.dev/ko/technologies/angular/interview-questions/directives-pipes.md): 22개 질문, Mid-Level
- [라우팅과 내비게이션](https://sharpskill.dev/ko/technologies/angular/interview-questions/routing-navigation.md): 24개 질문, Mid-Level
- [리액티브 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-reactive.md): 26개 질문, Mid-Level
- [RxJS 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-fundamentals.md): 22개 질문, Mid-Level
- [RxJS 연산자](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-operators.md): 24개 질문, Mid-Level
- [HttpClient 및 API 호출](https://sharpskill.dev/ko/technologies/angular/interview-questions/http-client.md): 22개 질문, Mid-Level
- [기본 상태 관리](https://sharpskill.dev/ko/technologies/angular/interview-questions/state-management-basics.md): 20개 질문, Mid-Level
- [Change Detection](https://sharpskill.dev/ko/technologies/angular/interview-questions/change-detection.md): 20개 질문, Mid-Level
- [Angular Signals](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-signals.md): 20개 질문, Mid-Level
- [Standalone Components](https://sharpskill.dev/ko/technologies/angular/interview-questions/standalone-components.md): 18개 질문, Mid-Level
- [Angular 단위 테스트](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-unit.md): 22개 질문, Mid-Level
- [엔드투엔드 테스팅](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-e2e.md): 18개 질문, Mid-Level
- [빌드 및 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/build-optimization.md): 20개 질문, Mid-Level
- [NgRx 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-fundamentals.md): 24개 질문, Senior
- [NgRx 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-advanced.md): 24개 질문, Senior
- [Angular 아키텍처](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-architecture.md): 22개 질문, Senior
- [성능 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/performance-optimization.md): 22개 질문, Senior
- [보안 및 모범 사례](https://sharpskill.dev/ko/technologies/angular/interview-questions/security-best-practices.md): 20개 질문, Senior
- [고급 RxJS 패턴](https://sharpskill.dev/ko/technologies/angular/interview-questions/advanced-rxjs-patterns.md): 22개 질문, Senior
- [Angular Universal 및 SSR](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-universal-ssr.md): 20개 질문, Senior
- [Angular 마이크로 프론트엔드](https://sharpskill.dev/ko/technologies/angular/interview-questions/micro-frontends-angular.md): 20개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-template-driven