분류 전체보기
-
04 리액티브 폼(Reactive Forms) 12앵귤러/04 폼(Forms) 2017. 10. 22. 21:16
FormArray를 사용하여 FormGroup 배열 표시지금까지 FormControls 와 FormGroup을 배웠습니다. FormGroup은 프로퍼티 값이 FormControls 및 다른 FormGroup 으로 이루어진 명명된 객체입니다.때로는 임의의 수의 컨트롤이나 그룹을 제시할 필요가 있습니다. 예를 들어, 영웅은 0, 1 또는 임의의 수의 주소를 가질수 있습니다.Hero.addresses프로퍼티는 Address 인스턴스의 배열입니다. 주소 FormGroup은 주소 하나를 표시할 수 있습니다. Angular의 FormArray는 주소 FormGroups의 배열을 표시 할 수 있습니다.FormArray 클래스에 액세스하려면 hero-detail.component.ts로 가져옵니다. src/app/he..
-
04 리액티브 폼(Reactive Forms) 11앵귤러/04 폼(Forms) 2017. 10. 22. 21:14
setValue 및 patchValue를 사용하여 폼 모델 채우기이전에 컨트롤을 만들고 동시에 값을 초기화했습니다. 나중에 setValue 및 patchValue 메소드를 사용하여 값을 초기화하거나 재설정할 수도 있습니다. setValuesetValue를 사용하면 FormGroup 뒤에 있는 폼모델과 정확히 일치하는 프로퍼티를 가진 데이터 객체를 전달하여 모든 폼컨트롤 값을 한번에 할당할 수 있습니다. src/app/hero-detail.component.ts (excerpt) this.heroForm.setValue({ name: this.hero.name, address: this.hero.addresses[0] || new Address() }); setValue 메서드는 폼 컨트롤 값을 할당하기 ..
-
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 Name value: {{ heroForm.get('name').value }} FormGroup안에 있는 FormControl의 상태를 가져 오려면 컨트롤에 점 표기법 경로를을 사용하여 지정합니다. src/a..
-
04 리액티브 폼(Reactive Forms) 09앵귤러/04 폼(Forms) 2017. 10. 22. 21:09
중첩 된 FormGroups이 폼은 점점 커지고 다루기 힘들어지고 있습니다. 관련된 FormControl을 중첩된 FormGroup으로 그룹화할 수 있습니다. street, city, state 및 zip은 좋은 주소 FormGroup을 만드는 프로퍼티입니다. 이 방법으로 그룹 및 컨트롤을 중첩하면 데이터 모델의 계층구조를 미러링하고 유효성검사 및 관련된 컨트롤 집합 상태를 추적하는 데 도움이 됩니다.FormBuilder를 사용하여이 컴포넌트에 heroForm이라는 FormGroup을 하나 생성하였습니다. 부모 FormGroup이라고 하겠습니다. FormBuilder를 다시 사용하여 주소 컨트롤을 캡슐화하는 자식 FormGroup을 만듭니다. 상위 FormGroup의 새 address 프로퍼티에 결과를 ..
-
04 리액티브 폼(Reactive Forms) 08앵귤러/04 폼(Forms) 2017. 10. 22. 21:07
더 많은 FormControls영웅은 이름 이외의 것이 있습니다. 주인공에게는 주소, 수퍼 파워, 때로는 조수가 있습니다.주소에 주 프로퍼티가 있습니다. 사용자는 박스로 주를 선택하고 엘리먼트를 주로 채 웁니다. 따라서 data-model.ts에서 states를 가져옵니다. src/app/hero-detail.component.ts (excerpt) import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { states } from './data-model'; states 프로퍼티를 선언하고 다음과 같이 heroForm에 몇 개의 주소FormCont..
-
04 리액티브 폼(Reactive Forms) 07앵귤러/04 폼(Forms) 2017. 10. 22. 21: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 생성자에..
-
04 리액티브 폼(Reactive Forms) 06앵귤러/04 폼(Forms) 2017. 10. 2. 11:12
FormGroup 추가일반적으로 FormControl이 여러 개인 경우 부모 FormGroup 안에 등록해야 합니다. 이것은 간단합니다. FormGroup을 추가하려면 hero-detail.component.ts의 imports 섹션에 추가합니다: src/app/hero-detail.component.ts import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; 클래스에서 다음과 같이 heroForm이라는 FormGroup안에 FormControl을 추가합니다. src/app/hero-detail.component.ts export class HeroDetailComponent { h..
-
04 리액티브 폼(Reactive Forms) 05앵귤러/04 폼(Forms) 2017. 10. 2. 11:10
HeroDetailComponent 표시AppComponent 템플릿을 수정하여 HeroDetailComponent를 표시합니다. src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Reactive Forms ` }) export class AppComponent {} 필수 폼 클래스핵심 폼 클래스에 대한 간략한 설명을 읽는 것이 도움이 될 수 있습니다.l AbstractControl은 FormControl, FormGroup 및 FormArray의 세 가지 구체적인 폼 컨트롤 클래스의 추상 기본 클래스입니다. 그것은 공통된 행동과 프로퍼티를 제공하며,..