-
04 리액티브 폼(Reactive Forms) 10앵귤러/04 폼(Forms) 2017. 10. 22. 21:12
FormControl 프로퍼티 검사
현재 전체 폼 모델을 페이지에 만들었습니다. 때때로 당신은 특정 FormControl의 상태에 관심이 있습니다.
.get() 메소드를 사용하여 폼 내의 개별 FormControl을 추출하여 개별 FormControl을 조사할 수 있습니다. 컴포넌트 클래스 내에서 이 작업을 수행하거나 템플릿에 다음을 추가하여 페이지에 표시 할 수 있습니다. {{form.value | json}} 보간법은 다음과 같습니다:
src/app/hero-detail.component.html
<p>Name value: {{ heroForm.get('name').value }}</p>
FormGroup안에 있는 FormControl의 상태를 가져 오려면 컨트롤에 점 표기법 경로를을 사용하여 지정합니다.
src/app/hero-detail.component.html
<p>Street value: {{ heroForm.get('address.street').value}}</p>
이 기술을 사용하여 다음 중 하나와 같은 FormControl의 프로퍼티를 표시 할 수 있습니다.
프로퍼티
설명
myControl.value
FormControl의 값
myControl.status
FormControl의 유효성. 가능한 값: VALID, INVALID, PENDING, or DISABLED.
myControl.pristine
UI에서 사용자가 값을 변경하지 않은 경우 true, 반대는 myControl.dirty
myControl.untouched
사용자가 HTML 컨트롤에 아직 입력하지 않고 해당 블러이벤트를 트리거 한 경우 true입니다. 그 반대는 myControl.touched입니다.
FormControl 속성에 대해 알아보려면 AbstractControl API 참조하세요.
FormControl 속성을 검사하는 일반적인 이유중 하나는 사용자가 유효한 값을 입력했는지 확인하는 것입니다. 폼 유효성 검사 가이드에서 Angular 폼 유효성 검사에 대해 자세히 알아보십시오.
데이터 모델과 폼 모델
현재 폼에 빈 값이 표시됩니다. HeroDetailComponent는 영웅, 아마도 원격 서버에서 검색 한 영웅의 값을 표시해야 합니다.
이 앱에서 HeroDetailComponent는 부모컴포넌트인 HeroListComponent 로부터 영웅을 얻습니다.
서버의 hero는 데이터 모델입니다. FormControl 구조는 폼 모델입니다.
컴포넌트는 데이터 모델의 영웅 값을 폼 모델에 복사해야 합니다. 두 가지 중요한 의미가 있습니다.
1. 개발자는 데이터 모델의 프로퍼티가 폼 모델의 프로퍼티에 매핑되는 방식을 이해해야합니다.
2. 사용자 변경은 DOM 엘리먼트에서 데이터 모델이 아닌 폼 모델로 흐릅니다. 폼 컨트롤은 결코 데이터 모델을 업데이트하지 않습니다.
폼모델과 데이터모델 구조가 정확히 일치 할 필요는 없습니다. 특정 화면에 데이터 모델의 하위 집합을 제공하는 경우가 있습니다. 그러나 폼 모델의 모양이 데이터 모델의 모양에 가까워지면 작업이 더 쉬워집니다.
여기 HeroDetailComponent에서는 두 모델이 아주 비슷합니다.
data-model.ts에서 Hero의 정의를 상기 해보십시오.
src/app/data-model.ts (classes)
export class Hero {
id = 0;
name = '';
addresses: Address[];
}
export class Address {
street = '';
city = '';
state = '';
zip = '';
}
다음은 컴포넌트의 FormGroup 정의부분 입니다.
src/app/hero-detail.component.ts (excerpt)
this.heroForm = this.fb.group({
name:['', Validators.required],
address: this.fb.group({
street:'',
city:'',
state:'',
zip:''
}),
power:'',
sidekick:''
});
이 두 모델 간에는 두 가지 중요한 차이점이 있습니다.
1. Hero는 id가 있습니다. 폼 모델은 일반적으로 사용자에게 기본키를 표시하지 않기 때문에 id가 없습니다.
2. Hero는 주소배열을 가지고 있습니다. 이 폼 모델은 하나의 주소 만 표시하며, 아래에서 다시 검토합니다.
그럼에도 불구하고 두 모델은 모양이 매우 비슷하므로 데이터 모델 프로퍼티를 patchValue 및 setValue 메서드를 사용하여 폼 모델에 쉽게 복사하는 방법을 잠깐 볼 수 있습니다.
다음과 같이 간결하고 명료하게 하기위해 주소 FormGroup 정의를 리팩토링합니다.
src/app/hero-detail-7.component.ts
this.heroForm = this.fb.group({
name:['', Validators.required],
address: this.fb.group(new Address()),
power:'',
sidekick:''
});
또한 Hero와 Address 클래스를 참조할 수 있도록 데이터 모델에서 임포트를 수정해야 합니다.
src/app/hero-detail-7.component.ts
import { states, Hero, Address } from './data-model';
'앵귤러 > 04 폼(Forms)' 카테고리의 다른 글
04 리액티브 폼(Reactive Forms) 12 (0) 2017.10.22 04 리액티브 폼(Reactive Forms) 11 (0) 2017.10.22 04 리액티브 폼(Reactive Forms) 09 (0) 2017.10.22 04 리액티브 폼(Reactive Forms) 08 (0) 2017.10.22 04 리액티브 폼(Reactive Forms) 07 (0) 2017.10.22