첫 번째 Angular 반응형 만드는 방법
Angular 반응형 양식을 만드는 방법을 알고 있습니까? 이 블로그 게시물을 읽고 프로세스에 대한 모든 것을 알아보세요. 자세한 단계가 포함되어 있습니다. 더 알아보세요.
다난제이 쿠마르
9분 읽기
Angular 반응형 양식을 만드는 방법을 아시나요? Angular 기본적으로 두 가지 유형의 양식을 제공합니다:
- 템플릿 기반 폼
- 반응형 양식
템플릿 기반 폼에서는 컴포넌트 템플릿에 컨트롤을 만들고 ngModel을 사용해 데이터를 바인딩합니다. 이 모드에서는 컨트롤이나 폼 객체를 만들거나, 컴포넌트 클래스와 템플릿 간 데이터 푸시와 풀링 코드를 작성하지 않습니다; Angular이 모든 작업을 대신 처리합니다. 템플릿 기반 폼에서는 컴포넌트 클래스 내 검증 코드가 거의 없고, 비동기식입니다.
Reactive Forms에서는 구성 요소 클래스 내 객체 트리로 폼 컨트롤을 생성하고, 템플릿 내 네이티브 폼 컨트롤에 바인딩합니다. 모든 검증과 폼 컨트롤 생성은 컴포넌트 클래스에 작성됩니다. Reactive Forms에서는 모든 검증과 네이티브 폼 상태 변경이 동기화되므로, 컴포넌트 클래스에 코드를 작성해 이를 관찰할 수 있습니다. 데이터 모델이 불변적이고 보통 데이터베이스에 매핑된 경우 반응형 폼을 생성하는 것을 선택해야 합니다.
이 두 가지 양식 생성 방식의 주요 차이점은 무엇인가요? 반응형 폼에서는 ngModel, required 같은 지시문을 사용하지 않습니다. 모든 컨트롤과 그 검증 항목을 구성 요소 클래스에서 생성합니다. 반응형 폼은 테스트와 유지보수가 쉽기 때문에, 이번 글에서는 FormControl, FormGroup, FormBuilder 클래스를 사용해 기본적인 반응형 폼을 만들고 검증을 추가하는 방법을 배울 것입니다.
1단계 : 반응형 모듈 추가
반응형 폼 작업을 시작하려면, 다음 목록에 나와 같이 먼저 앱 모듈에 ReactiveFormsModle을 추가하세요:
import {ReactiveFormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2단계: 컴포넌트에서 필수 모듈을 가져오기
다음으로, FormGroup, FormControl, FormArray 같은 필수 반응형 폼 클래스를 구성 요소 클래스에 가져오세요. 이 클래스들을 사용해 반응형 폼을 구성할 것입니다. 이 클래스들을 가져오면 구성 요소 클래스는 아래 목록과 같아야 합니다:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Reactive Forms Demo';
}
구성 요소 클래스는 구현에 따라 위에서 생성된 AppComponent와 다를 수 있습니다; 하지만 여기에는 FormGroup, FormControl, FormArray 클래스가 임포트되어 있습니다. 이 클래스들에 대해 하나씩 살펴보겠습니다:
3단계: FormControl 클래스 사용
FormControl 클래스는 하나의 개별 폼 컨트롤에 해당하며, 그 값과 유효성을 추적합니다. 반응형 폼을 생성할 때 FormControl 클래스의 객체를 생성하게 됩니다. FormControl 생성자는 세 가지 매개변수를 사용합니다:
- 초기 데이터 값은 영(null)일 수 있습니다.
- 동기식 검증기 배열. 이것은 선택 매개변수입니다.
- 비동기 검증기 배열. 이것은 선택 매개변수입니다.
구성 요소 클래스에서는 아래 목록과 같이 FormControl을 생성할 수 있습니다:
export class AppComponent {
email = new FormControl('');
}
동기화 검증이나 비동기 검증 같은 선택적 매개변수는 전달하지 않지만, FormControl에 검증을 추가하면서 이러한 매개변수들을 탐색할 예정입니다.
뷰에서는 아래에 표시된 이메일 FormControl을 사용할 수 있습니다:
<input [formControl]='email'
type="text"
placeholder="Enter Email" />
{{email.value | json}}
보시다시피, 우리는 property를 사용하여 formControl 이메일을 뷰의 입력 요소에 바인딩하고 있습니다.
4단계: FormGroup 클래스 사용
FormGroup은 FormControls 그룹입니다. FormGroup 내에 다양한 FormControl을 캡슐화할 수 있으며, FormGroup은 다음을 위한 API를 제공합니다:
- 통제군 또는 형태의 검증 추적
- 통제군 또는 형태의 가치 추적
이 객체는 자식 컨트롤을 속성으로 포함하며, 뷰의 상단 레버 폼에 해당합니다. FormGroup은 자식 FormControl의 값을 집계하는 단일 객체로 생각할 수 있습니다. 각 개별 폼 컨트롤은 FormGroup 객체의 속성입니다.
다음 목록에 나와 같이 FormGroup 클래스를 생성할 수 있습니다:
loginForm = new FormGroup({
email: new FormControl(' '),
password: new FormControl(' ')
})
여기서는 로그인 양식인 FormGroup을 만들었습니다. 이메일과 비밀번호를 위한 두 가지 폼 컨트롤로 구성되어 있습니다. 다음 목록에 보이는 것처럼 FormGroup을 사용하는 것은 매우 쉽습니다:
<form [formGroup]='loginForm' novalidate class="form">
<input formControlName='email'
type="text"
class="form-control"
placeholder="Enter Email" />
<input formControlName='password'
type="password"
class="form-control"
placeholder="Enter Password" />
</form>
{{loginForm.value | json}}
{{loginForm.status | json }}
여기서는 property를 사용해 FormGroup을 form 및 formControlName 명령어와 결합하여 뷰의 특정 요소에 FormControl을 부착하는 것입니다.
템플릿 기반 폼을 사용했다면, 뷰가 훨씬 간결해진 것을 알 수 있을 것입니다: 요소에 ngModel이나 이름이 첨부되어 있지 않습니다. 값과 상태 속성을 사용하여 폼의 값과 상태를 찾을 수 있습니다. 이제는 템플릿 참조 변수를 사용해 폼의 상태와 값을 찾을 필요가 없습니다.
5단계: 양식 제출
양식을 제출하려면 제출 버튼과 호출할 함수를 추가해 주세요. 다음과 같이 양식을 수정하겠습니다:
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<button class="btn btn-default">Login</button>
</form>
구성 요소 클래스 에서는 아래 목록과 같이 양식을 제출하는 함수를 추가할 수 있습니다:
export class AppComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, Validators.required),
password: new FormControl()
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
여기서는 form서 제출 이벤트를 처리하는 loginUser라는 함수를 방금 추가했습니다. 이 함수 내에서 status와 value 속성을 사용하여 FormGroup 객체 loginForm의 값과 상태를 읽을 수 있습니다. 보시다시피, 이 함수는 개별 폼 컨트롤의 값을 집계하는 객체를 제공합니다.
Step 6: Adding validations
양식에 검증 기능을 추가하지 않은 것을 눈치채셨을 겁니다. 먼저 FormControls에 검증을 추가하는 것부터 시작하겠습니다. 이를 위해 검증자를 @angular/forms에서 가져오세요:
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, Validators.required),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)])
});
}
템플릿에서는 FormGroup get 메서드를 사용하여 특정 폼 컨트롤의 오류를 찾아 사용할 수 있습니다. 아래 목록에서는 이메일의 검증 오류를 확인하고 오류 div를 표시하고 있습니다.
<div class="alert alert-danger"
*ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
Email is required
</div>
또한 기본적으로 제출 버튼을 비활성화할 수 있으며, 양식이 유효할 때 활성화하여 제출을 허용할 수 있습니다. 아래 목록과 같이 할 수 있습니다:
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
모든 것을 합치면, 반응형 템플릿은 다음과 같습니다:
<div class="container">
<br />
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<div class="alert alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
Email is required
</div>
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<div class="alert alert-danger" *ngIf=" !loginForm.get('password').valid && loginForm.get('email').touched">
Password is required and should less than 10 characters
</div>
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
</form>
</div>
구성 요소 클래스는 아래 목록에 나타난 다음과 같습니다:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.minLength(4)]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)])
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
Step 7: Using FormBuilder
FormBuilder는 FormGroup과 FormControl의 문법을 단순화하는 데 사용됩니다. 폼이 길어질 때 매우 유용합니다. 예를 들어; FormBuilder를 사용하도록 loginForm을 리팩토링합니다. 이를 위해서는 먼저 @angular/forms에서 FormBuilder를 불러옵니다. 그 다음 아래 목록과 같이 컴포넌트에 주입합니다:
constructor(private fb : FormBuilder){}
아래 목록처럼 FormBuilder를 사용해 반응형 폼을 만들 수 있습니다. 보시다시피, 문법이 단순화되었습니다:
this.loginForm = this.fb.group({
email: [null, [Validators.required, Validators.minLength(4)]],
password: [null, [Validators.required, Validators.maxLength(8)]]
})
템플릿은 FormBuilder와 FormControl 클래스 모두 동일하게 사용됩니다. 모든 것을 합치면, FormBuilder를 사용해 반응형 폼을 생성하는 컴포넌트는 다음과 같습니다:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.loginForm = this.fb.group({
email: [null, [Validators.required, Validators.minLength(4)]],
password: [null, [Validators.required, Validators.maxLength(8)]]
})
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
이 게시물이 마음에 드시나요?
그리고 거기에 있습니다! 이 게시물이 마음에 드시면 공유해 주세요. 또한 Infragistics Ignite UI for Angular 구성 요소를 확인하지 않았다면 반드시 확인해 보세요! 그들은 30+ 자료 기반 Angular 구성 요소를 사용하여 빠른 웹 앱을 더 빠르게 코딩할 수 있도록 도와줍니다.
