04 리액티브 폼(Reactive Forms) 07

FormBuilder 소개

FormBuilder 클래스를 사용하면 컨트롤 생성 세부 정보를 처리하여 반복 및 혼란을 줄일 수 있습니다.

FormBuilder를 사용하기 위해 hero-detail.component.ts 파일로 임포트합니다.

src/app/hero-detail.component.ts (excerpt)

import { Component }              from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms';

다음 계획을 따라서 HeroDetailComponent를 읽기 쉽고 쓰기 쉬운 것으로 리팩터링합니다.

l  heroForm 프로퍼티의 형식을 FormGroup으로 명시적으로 선언합니다. 나중에 초기화 할 것입니다.

l  생성자에 FormBuilder를 주입합니다.

l  heroForm을 정의하기 위하여 FormBuilder를 사용하는 새로운 메서드를 추가합니다. createForm이라고 합니다.

l  생성자에서 createForm을 호출합니다.

수정된 HeroDetailComponent는 다음과 같습니다.

src/app/hero-detail.component.ts (excerpt)

export class HeroDetailComponent {       heroForm: FormGroup;             constructor(private fb:FormBuilder){           this.createForm();       }         createForm(){           this.heroForm = this.fb.group({name:''});       }   }

FormBuilder.group은 FormGroup을 생성하는 팩토리 메서드입니다. FormBuilder.group은 키와 값이 FormControl 이름과 그 정의인 객체를 사용합니다. 이 예제에서 name 컨트롤은 초기 데이터 값인 빈 문자열로 정의됩니다.

단일 객체에 컨트롤그룹을 정의하면 작고 읽기 쉬운 스타일을 만들 수 있습니다. 그것은 새로운 FormControl(...) 문과 동일한 일련의 작업보다 수월합니다

 

Validators.required

이 가이드가 유효성검사에 깊이 관여하지는 않지만, 리액티브 폼에서 필요한 Validators.required를 사용하는 간단한 예가 있습니다.

먼저 Validators 기호를 임포트합니다.

src/app/hero-detail.component.ts (excerpt)

createForm(){         this.heroForm = this.fb.group({             name:['', Validators.required]         });       }

 

리액티브 유효성 검사기는 간단하고 구성 가능한 기능입니다. 유효성 검사기를 디렉티브에 감싸야하는 템플릿 기반 폼에서는 유효성 검사를 구성하는 것이 더 어렵습니다.

템플릿의 맨 아래에 있는 진단 메시지를 수정하여 폼의 유효성 상태를 표시하십시오.

src/app/hero-detail.component.html (excerpt)

<p>Form value: {{ heroForm.value | json }}</p> <p>Form status: {{ heroForm.status | json }}</p>

브라우저에 다음과 같이 표시됩니다.

Validators.required가 작동합니다. 입력박스에 값이 없으므로 상태는 INVALID입니다. 입력박스에 입력하여 상태가 INVALID에서 VALID로 변경되었는지 확인합니다.

실제 앱에서는 진단 메시지를 사용자 친화적인 환경으로 바꿔야 합니다.

Validators.required를 사용하는 것은 나머지 가이드에서는 선택 사항입니다. 동일한 구성으로 다음 예제에 각각 남아 있습니다.

Angular 폼 유효성검사에 대한 자세한 내용은 폼 유효성검사 가이드를 참조하십시오.