2025/04/02

아크몬드넷 archmond.net

Angular Forms: Hello World

2020년 3월 29일 프로그래밍+DB 487 조회 수

오늘부터 다시 앵귤러 공부 시작.

https://app.pluralsight.com/library/courses/angular-forms/table-of-contents

위 강좌를 보며 실습.

o user-settings-form.componl
app.module.ts
src > app > TS app.module.ts > AppModule
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { BrowserModu1e } from '@angular/platform-browser' ;
import { NgModu1e } from '@angular/core';
import { FormsModu1e } from '@angular/forms';
import { AppComponent } from ./app. component' ;
@NgModu1e({
declarations: [
AppComponent
imports: [
BrowserModu1e
FormsModu1e
providers: [J'
bootstrap: [AppComponent]
export class AppModu1e { }

app.module.ts에 FormsModule 추가(import)한 뒤 ng g c user-settings-form 명령으로 모듈 추가

dule.ts
user-settings-form.component.html X <> app.componentl
src > app > user-settings-form > o user-settings-form.component.html > form
1
2
3
<form>
<input placeholder="Name" / >
< / button>
/ forn€

추가한 모듈에 form을 간단히 추가한 뒤

form.component.html
app.componenthtml X
src > app > app.component.html > app-user-settings-form
<app -u ser- settings -form>E/ app - user - settings -form}
1

app.component.html에 app-user-settings-form.ts 파일에 있던 selector 명칭으로 태그를 입력

Name
x pluralsightcor x
O localhost4200
Ok
Angular

초간단 폼 완성.

———————

부트스트랩(Bootstrap) 스타일 입히기

참고: 부트스트랩 4.4 폼

PS C: npm install
bootstrap
- -save
npm bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but non
e is installed. You must install peer dependencies yourself.
npm bootstrap@4.4.1 requires a peer of popper.js@A1.16.0 but no
ne is installed. You must install peer dependencies yourself.
optional
SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (nod
e_modules\fsevents) :
SKIPPING OPTIONAL DEPENDENCY: Unsupported platform f
notsup
or fsevents@1.2.12: wanted {"os" : "darwin", "arch" : "any"} (current: {"
os " : "win32" , "arch " : "x64"})
+ bootstrap@4.4.1
added 1 package from 2 contributors and audited 43266 packages in 11
. 206s
found 8 vulnerabilities (3 3 moderate, 2
high)
run •npm audit fix* to fix them, or *npm audit* for details
PS C: \Users\archmond\ps-demo>

npm install –save bootstrap 명령으로 부트스트랩 노드 모듈 추가

{l angular.json
angular.json >
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
projects ps-demo > {Y architect > { } build > {y options > [ ] styles
"builder " :
"@angular-devkit/build - angular : browser" ,
"options " :
"outputPath "dist/ps-demo" ,
"index": "src/index. html " ,
"main" • "src/main.ts"
"polyfills": "src/polyfills . ts"
"tsConfig"• "src/tsconfig. app. json"
"assets " :
"src/favicon . ico"
"src/assets"
" styles " •
" node_modules/bootstrap/dist/css /bootstrap. min. css
" src/styles . css"
"scripts"
" es5BrowserSupport " •
"configurations" .
true

angular.json 파일의 styles에 부트스트랩 모듈 기재(src/styles.css보다 이전에 위치하도록)

“node_modules/bootstrap/dist/css/bootstrap.min.css”,

H71(V)
user-settings-form.component.html - ps-de...
x
PsDemo
user-settings-form.component.html X
> user-settings-form > o user-settings-form.component.html > form > button.btn.btn-pril
1
2
3
C O localhost4200
0k
<form>
Name
<input placeholder="Name"
"9Y1•btn-pr1ma
<button class=
</form>

button의 class에 bootstrap 스타일을 입혀주면 적용완료!

——————–

체크박스&라디오버튼 넣기

부트스트랩 문서에서 체크박스 샘플 소스 코드가 있다. 이를 참조하여 입력.

라디오버튼도 조금만 스크롤하면 밑에 존재한다.

User Settings
Name
Name
Email Special Offers
User Interface Style
Light
O
Medium
O
Dark
Send

체크 박스나 라디오버튼의 그룹 스타일링을 위해 form-group 클래스를 입력해 묶어줌.

<h5>User Inter*ace Style
<div class=
form- group" >
<div class="form-check">
<input
class="form-check-input"

그 외에도 Select, Textarea를 추가.

Example select
Monthly
Notes
Send

이 다음에는 데이터 바인딩으로 넘어간다. 두근두근!

태그Angular Angular Forms Bootstrap 부트스트랩 앵귤러

관련 글

이것도 살펴보세요!

WSL 개발 환경 설정

WSL로 개발 환경 설정하는 법 https://learn.microsoft.com/ko-kr/windows/wsl/setup/environment 1. 아래 명령으로 WSL을 설치하고, 리눅스 사용자 이름과 암호 …

댓글 하나

핑백: Angular Forms: Data Binding – 아크몬드넷

답글 남기기 응답 취소