앵귤러
-
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의 세 가지 구체적인 폼 컨트롤 클래스의 추상 기본 클래스입니다. 그것은 공통된 행동과 프로퍼티를 제공하며,..
-
04 리액티브 폼(Reactive Forms) 04앵귤러/04 폼(Forms) 2017. 10. 2. 11:08
리액티브 폼 컴포넌트 만들기app 디렉토리에 hero-detail.component.ts라는 새 파일을 만들고 다음 기호를 가져옵니다. src/app/hero-detail.component.ts import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; 이제 HeroDetailComponent 메타 데이터를 지정하는 @Component 데코레이터를 입력하십시오. src/app/hero-detail.component.ts (excerpt) @Component({ selector: 'hero-detail', templateUrl: './hero-detail.component.html' }) 그런 다음 Form..
-
04 리액티브 폼(Reactive Forms) 03앵귤러/04 폼(Forms) 2017. 10. 2. 11:07
데이터 모델 만들기이 가이드의 초점은 영웅을 편집하는 리액티브폼 컴포넌트입니다. 영웅 클래스와 영웅 데이터가 필요합니다. app 디렉토리에 새로운 data-model.ts 파일을 만들고 아래 내용을 복사하십시오. src/app/data-model.ts export class Hero { id = 0; name = ''; addresses: Address[]; } export class Address { street = ''; city = ''; state = ''; zip = ''; } export const heroes: Hero[] = [ { id: 1, name: 'Whirlwind', addresses: [ {street: '123 Main', city: 'Anywhere', state: 'CA'..
-
04 리액티브 폼(Reactive Forms) 02앵귤러/04 폼(Forms) 2017. 10. 2. 11:07
템플릿 기반 폼템플릿 가이드에 소개된 템플릿 기반 폼은 완전히 다른 접근 방식을 취합니다.ngModel과 같은 디렉티브를 사용하여 컴포넌트 템플릿에 HTML 폼컨트롤 (예 : 및 )을 배치하고 컴포넌트의 데이터 모델 프로퍼티에 바인딩합니다.Angular 폼 컨트롤 개체는 만들지 마세요. Angular디렉티브가 데이터 바인딩의 정보를 사용하여 디렉티브를 만듭니다. 직접 데이터 값을 입력하거나, 겨져오지 마십시오. Angular가 ngModel을 사용하여 처리가 가능합니다. Angular는 변경될 수 있는 사용자 변경으로 인한 데이터 모델을 업데이트합니다.이러한 이유로 ngModel 디렉티브는 ReactiveFormsModule의 일부가 아닙니다.이는 컴포넌트 클래스에서 적은 코딩을 의미하지만, 템플릿 기반..