Angular에서 반응형을 사용하는 방법
소개
Angular는 템플릿 기반 양식 및 반응형 양식(모델 기반 양식이라고도 함)의 두 가지 양식 작업 방식을 제공합니다. 템플릿 기반 양식은 Angular에서 양식을 사용하는 기본 방법입니다. 템플릿 기반 양식에서 템플릿 지시문은 양식의 내부 표현을 작성하는 데 사용됩니다. 반응형 양식을 사용하면 구성 요소 클래스에서 고유한 양식 표현을 구축할 수 있습니다.
참고: 반응형은 Angular 2에서 도입되었습니다.
다음은 반응형의 몇 가지 장점입니다.
- 맞춤 검사기 사용
- 동적으로 유효성 검사 변경
- 양식 필드를 동적으로 추가
이 기사에서는 반응형 양식을 예제 Angular 애플리케이션에 적용하는 방법을 살펴봅니다.
전제 조건
이 기사를 따라 하려면 다음이 필요합니다.
- Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
이 게시물은 Angular에 대한 기본 지식이 있다고 가정합니다.
이 게시물은 또한 @angular/cli에 의해 생성된 새로운 Angular 프로젝트에서 빌드한다고 가정합니다. Angular CLI를 시작하는 경우 이 게시물을 참조할 수 있습니다.
이 튜토리얼은 Node v15.1.0, npm v6.14.8, @angular/core v11.0.0 및 @angular/forms v11에서 확인되었습니다. .0.0.
1단계 - 프로젝트 설정
이 자습서의 목적을 위해 @angular/cli로 생성된 기본 Angular 프로젝트에서 빌드합니다.
- npx @angular/cli new angular-reactive-forms-example --style=css --routing=false --skip-tests
이렇게 하면 스타일이 "CSS\("Sass\, Less\ 또는 "Stylus\와 반대)로 설정되고 라우팅이 없고 테스트를 건너뛰는 새 Angular 프로젝트가 구성됩니다.
새로 생성된 프로젝트 디렉토리로 이동합니다.
- cd angular-reactive-forms-example
반응형 양식으로 작업하려면 FormsModule 대신 ReactiveFormsModule을 사용합니다.
코드 편집기에서 app.module.ts를 열고 ReactiveFormsModule을 추가합니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
이 시점에서 ReactiveFormsModule이 포함된 새 Angular 프로젝트가 있어야 합니다.
2단계 - 구성 요소 템플릿에 양식 추가
반응형 양식을 사용하면 논리가 구성 요소 클래스에서 완전히 선언됩니다.
코드 편집기에서 app.component.html을 열고 다음 코드 줄을 추가합니다.
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<div>
<label>
Name:
<input formControlName="name" placeholder="Your name">
</label>
</div>
<div>
<label>
Email:
<input formControlName="email" placeholder="Your email">
</label>
</div>
<div>
<label>
Message:
<input formControlName="message" placeholder="Your message">
</label>
</div>
<button type="submit">Send</button>
</form>
이 코드는 name, email 및 message의 세 가지 필드가 있는 양식을 만듭니다. 보내기 레이블이 있는 제출 버튼도 있습니다. 양식을 제출할 때 onSubmit(myForm) 메서드가 호출됩니다.
참고: Angular 2.x를 사용하는 경우 Angular가 HTML5의 유효성 검사를 재정의하므로 여는 form 태그와 함께 novalidate 지시문도 추가해야 합니다. Angular 4+에서는 novalidate가 백그라운드에서 자동으로 추가됩니다.
분석해 보겠습니다.
formGroup: 양식은 구성 요소 클래스에서FormGroup으로 처리되므로formGroup지시문을 사용하면 양식 그룹.ngSubmit: 양식 제출 시 트리거되는 이벤트입니다.formControlName: 각 양식 필드에는 구성 요소 클래스에서 사용되는 이름이 될 값이 있는formControlName지시문이 있어야 합니다.
이 시점에서 양식을 사용하는 구성 요소 템플릿이 있는 새 Angular 프로젝트가 있어야 합니다.
3단계 — 구성 요소 클래스 구축
다음으로 구성 요소 클래스에서 FormGroup과 FormGroup 내의 개별 FormControl을 정의합니다.
FormControl을 새할 때 값이 제공되면 필드의 초기 값으로 사용됩니다.
FormGroup 및 FormControl 이름이 템플릿에서 사용된 것과 동일한지 확인하십시오. 또한 ngOnInit 수명 주기 후크에서 FormGroup을 초기화하는 방법에 유의하십시오.
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl('Sammy'),
email: new FormControl(''),
message: new FormControl('')
});
}
onSubmit(form: FormGroup) {
console.log('Valid?', form.valid); // true or false
console.log('Name', form.value.name);
console.log('Email', form.value.email);
console.log('Message', form.value.message);
}
}
이 자습서의 목적을 위해 onSubmit 메서드는 제출된 양식 값을 외부 서비스나 서버에 실제로 전달하지 않습니다. 양식의 유효성 및 FormControl 값에 액세스하는 방법을 보여줍니다.
이 시점에서 애플리케이션을 컴파일하고 웹 브라우저에서 열 수 있습니다. name, email 및 message에 대한 값을 입력하고 제출을 누르면 콘솔 로그에 값이 표시됩니다.
4단계 - FormBuilder를 사용하도록 구성 요소 클래스 업데이트
ngOnInit 양식 구성은 FormBuilder 도우미를 사용하여 다시 작성할 수 있습니다. 이렇게 하면 양식 그룹 및 양식 컨트롤의 모든 새로 만들기를 포기할 수 있습니다.
코드 편집기에서 app.component.ts를 다시 방문하여 FormControl을 제거하고 FormGroup을 FormBuilder로 바꿉니다.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
name: 'Sammy',
email: '',
message: ''
});
}
onSubmit(form: FormGroup) {
console.log('Valid?', form.valid); // true or false
console.log('Name', form.value.name);
console.log('Email', form.value.email);
console.log('Message', form.value.message);
}
}
FormBuilder가 포함된 이 코드는 FormGroup을 생성하기 위한 상용구 코드의 양을 줄입니다.
5단계 - 유효성 검사기를 사용하도록 구성 요소 클래스 업데이트
Validators 클래스를 가져오기에 추가하고 간단한 문자열 값 대신 배열로 양식 컨트롤을 선언합니다.
배열의 첫 번째 값은 초기 양식 값이고 두 번째 값은 유효성 검사기가 사용할 값입니다. 여러 유효성 검사기를 배열로 래핑하여 동일한 양식 컨트롤에서 어떻게 사용할 수 있는지 확인하십시오.
코드 편집기에서 app.component.ts를 다시 방문하고 Validators를 추가합니다.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
name: ['Sammy', Validators.required],
email: ['', [Validators.required, Validators.email]],
message: ['', [Validators.required, Validators.minLength(15)]],
});
}
onSubmit(form: FormGroup) {
console.log('Valid?', form.valid); // true or false
console.log('Name', form.value.name);
console.log('Email', form.value.email);
console.log('Message', form.value.message);
}
}
이 코드는 required를 name, email 및 message 필드에 추가합니다. 또한 email 값이 유효한 이메일 주소 형식을 사용하는지 확인합니다. 또한 message 값의 길이가 15자 이상인지 확인합니다.
이러한 양식 요구 사항 중 하나라도 통과하지 못하는 경우 valid 값은 false가 됩니다. 이러한 양식 요구 사항이 모두 통과되면 valid 값은 true가 됩니다.
6단계 - 템플릿의 양식 값 및 유효성 액세스
템플릿에서 각 FormControl의 값과 유효성 및 전체 양식 그룹의 값과 유효성에 전체적으로 액세스할 수 있습니다.
app.component.html을 다시 방문하고 *ngIf를 사용하여 양식 값이 유효하지 않은 경우 사용자에게 피드백 메시지를 표시합니다.
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<div>
<label>
Name:
<input formControlName="name" placeholder="Your name">
</label>
<div *ngIf="myForm.get('name').invalid && (myForm.get('name').dirty || myForm.get('name').touched)">
Please provide a name.
</div>
</div>
<div>
<label>
Email:
<input formControlName="email" placeholder="Your email">
</label>
<div *ngIf="myForm.get('email').invalid && (myForm.get('email').dirty || myForm.get('email').touched)">
Please provide a valid email address.
</div>
</div>
<div>
<label>
Message:
<input formControlName="message" placeholder="Your message">
</label>
<div *ngIf="myForm.get('message').invalid && (myForm.get('message').dirty || myForm.get('message').touched)">
Messages must be at least 15 characters long.
</div>
</div>
<button type="submit" [disabled]="myForm.invalid">Send</button>
</form>
이 코드는 사용자가 필드와 상호 작용했는지(dirty 또는 touched) 확인합니다. 그런 다음 값이 유효성 검사 요구 사항을 통과하지 못하면 오류 메시지가 표시됩니다. 양식 값과 관련된 모든 문제가 해결될 때까지 보내기 버튼도 비활성화됩니다.
양식 컨트롤 값을 검색하는 방법에는 여러 가지가 있습니다. 이 예제에서는 myForm.controls.name과 동일한 myForm.get(name)을 사용합니다. .hasError(required) 또는 .errors.required를 사용하여 오류 정보를 검색할 수 있습니다.
결론
이 기사에서는 반응형 양식을 예제 Angular 애플리케이션에 적용하는 방법을 살펴보았습니다. FormControl, FormGroup, FormBuilder 및 Validators를 사용하여 유효성 검사가 있는 예제 양식을 구성했습니다. 추가 기능에 대해서는 공식 문서를 참조하십시오.
Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하세요.