Angular Reactive Form 소개

Angular는 양식을 통해 사용자 입력을 처리하는 두 가지 주요 접근 방식인 반응형 및 템플릿 기반을 제공합니다. 두 접근 방식 모두 공통 Forms API를 기반으로 구축됩니다.

이 게시물에서는 모델 기반 양식이라고도 하는 반응형 접근 방식에 따라 양식을 작성합니다.



나는 Intro To Angular Template-driven Forms 을 작성했는데 여기서 템플릿 기반 접근 방식을 사용하여 동일한 양식을 만들었습니다.

차이점을 더 잘 이해하기 위해 두 가지 접근 방식을 사용하여 동일한 양식을 작성하는 것이 유용하다는 것을 알았습니다.

이 포스트에서는 이론은 생략하고 더 읽어보고 싶다면 무료article on Medium를 살펴보세요.

출발점: 하나의 요소 만들기

무엇보다 먼저 ReactiveFormsModule을 가져와야 한다는 점을 기억해야 합니다. "반응형 양식에 필요한 인프라와 지시문을 내보내기"때문입니다.

따라서 app.module.ts에서 ReactiveFormsModule을 가져옵니다.

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

@NgModule의 가져오기에서 선언합니다.

imports: [BrowserModule, ReactiveFormsModule],

1단계: 템플릿의 첫 번째 요소

Angular 양식의 일반 양식 요소는 다음과 같습니다.

<div>
  <label for="email">Email</label>
  <input type="email" id="email" [formControl]="email" />
</div>

이것은 [formControl]=”email"을 제외한 일반 HTML입니다.

formControl 바인딩은 위에서 가져온 ReactiveFormsModule에서 가져온 FormControlDirective에서 가져옵니다.

2단계: 클래스에서 컨트롤 만들기

FormControl을 가져온 후 이메일에 새 FormControl 인스턴스를 할당할 수 있습니다. FormControl "개별 양식 컨트롤의 값과 유효성 검사 상태를 추적합니다."angular.io.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
...
export class ReactiveFormComponent {
  email = new FormControl('');
}

이 경우 new FormControl('')을 사용하여 email의 초기 값을 빈 문자열로 설정합니다.

FormControl 덕분에 양식 요소의 상태를 수신, 업데이트 및 확인할 수 있습니다.

이거 야! 첫 번째 요소를 만들었습니다!

하나의 요소에서 양식으로

위의 일반 요소에서 시작하여 다음 양식을 작성할 수 있습니다.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
...
reactiveForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    age: new FormControl(''),
});

새 FormGroup 인스턴스를 만들려는 모든 구성 요소의 @angular/forms에서 FormGroup을 가져와야 합니다.

클래스에 FormGroup 인스턴스를 만들었습니다. FormGroup "FormControl 인스턴스 그룹의 값과 유효성 상태를 추적합니다."angular.io.

그런 다음 FormGroup 모델을 연결하고 속성 바인딩을 사용하여 템플릿을 확인해야 합니다.

템플릿 기반 양식의 경우 각 요소를 처리하는 대신 양식 전체로 작업하는 방법을 원합니다.

.

첫 번째 차이점

formtag에서 템플릿 기반 양식의 첫 번째 차이점을 볼 수 있습니다. 더 이상 참조 변수를 사용하지 않습니다.

두 번째 차이점

두 번째 차이점은 formControlName입니다.

"FormControlName 지시문이 제공하는 formControlName 입력은 각 개별 입력을 FormGroup에 정의된 양식 컨트롤에 바인딩합니다."angular.io.

그러나 양식 그룹 인스턴스는 모델 값에 대한 정보 소스를 제공합니다.

세 번째 차이점

세 번째 차이점은 입력 태그에 이름 속성을 사용할 필요가 없다는 것입니다.

빠른 요약

Angular는 양식 작성에 대한 두 가지 주요 접근 방식인 반응형 및 템플릿 기반을 제공합니다. 이 게시물에서는 반응적 접근 방식을 살펴보았습니다.

두 접근 방식 모두 공통 Forms API를 기반으로 합니다.

<올>

app.module.ts에서 ReactiveFormsModule 가져오기

new FormControl()을 사용하여 양식 컨트롤을 인스턴스화합니다

.

new FormGroup()을 사용하여 양식 컨트롤 그룹 만들기

속성 바인딩 [FormGroup]="myFormGroupName"을 통해 보기가 있는 클래스의 FormGroup 모델을 바인딩합니다

.

태그는 ReactiveFormsModule을 가져온 후 기본적으로 NgForm을 구현합니다

.

code on GitHub을 보거나 original article on Medium(무료)을 읽어보세요.