Angular의 반응형

안녕하세요 독자 여러분 👋, 제 배움의 여정에 여러분이 함께하게 되어 기쁩니다!
지난주는 다소 힘들었지만, 이번 주에 다섯 번째 블로그로 다시 돌아왔습니다.

새로운 독자를 위해 "Getting Started With Angular"시리즈에 나의 학습 여정을 기록하여 사람들이 배우는 데 도움이 되기를 바랍니다.

이번 주에 우리는 Reactive Forms에 대해 배울 것입니다.

반응형이란 무엇입니까?

반응형 양식은 시간이 지남에 따라 값이 변경되는 양식 입력을 처리하는 모델 중심 접근 방식을 제공합니다. 유효성 검사 논리 및
컨트롤의 초기 상태는 모델 개체에 의해 정의됩니다. 양식 상태가 변경될 때마다 모델의 새 상태가 반환됩니다. 반응형 양식의 모든 컨트롤은 양식 컨트롤의 상태와 값을 제공하는 관찰 가능 항목을 내보냅니다. 반응형 양식은 또한 요청 시 데이터가 일관되고 예측 가능하다는 것을 확신하기 때문에 테스트에 대한 간단한 경로를 제공합니다.

기본 양식 컨트롤 추가

양식 컨트롤을 사용하는 데는 세 단계가 있습니다.

응용 프로그램에 반응형 양식 모듈을 등록합니다. 이 모듈은 반응형을 사용하는 데 필요한 반응형 지시문을 선언합니다.

새FormControl 인스턴스를 생성하고 구성 요소에 저장합니다.

템플릿에 FormControl를 등록합니다.

ReactiveFormsModule 가져오기

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

FormControl 만들기

모듈을 가져온 후 클래스FormGroup를 가져옵니다. FormControl 클래스는 하나의 개별 양식 컨트롤에 해당하며,
가치와 유효성을 추적합니다.

export class AppComponent {
email = new FormControl(‘’);
}

이메일 사용FormControl:

<input [formControl]=’email’
type=”text”

Reactive Forms 79

placeholder=”Enter Email” />
{{email.value | json}}

FormGroup 만들기

FormGroup는 FormControls의 그룹입니다. 양식에는 둘 이상의 컨트롤이 있을 것으로 예상되며 이때 FormGroup가 작동합니다.

예: 두 개의 컨트롤(이메일 및 비밀번호)이 있는 양식 만들기

loginForm = new FormGroup({
email: new FormControl(‘ ‘),
password: new FormControl(‘ ‘)
});

두 컨트롤을 모두 사용하면 전체 코드가 다음과 같이 표시됩니다.

<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 }}

FormBuilder 사용

양식 컨트롤 인스턴스를 수동으로 만드는 것은 여러 양식을 처리할 때 반복될 수 있습니다. FormBuilder 서비스는 컨트롤을 생성하는 편리한 방법을 제공합니다.

첫 번째 단계는 Form Builder를 가져오고 주입하는 것입니다.

import { FormBuilder } from '@angular/forms';
constructor(private fb: 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);
}
}

엔딩 노트

끝까지 읽어주셔서 감사합니다.

내 학습 크레딧의 대부분은 다음에 사용됩니다.

Angular docs

and의 책

이 블로그를 통해 내 여정을 기록하고 더 많은 사람들을 도울 수 있기를 기대합니다.

질문이나 제안 사항이 있으면 아래 의견에 남기거나 저에게 연락하십시오.