앵귤러/04 폼(Forms)
-
05 동적 폼(Dynamic Forms) 03앵귤러/04 폼(Forms) 2017. 11. 4. 11:51
설문 데이타DynamicFormComponent는 @Input () 질문에 바인딩된 일련의 폼 질문 목록을 필요로합니다.직업 응용프로그램에 대해 정의한 일련의 질문은 QuestionService로부터 리턴됩니다. 실제 앱에서는 이러한 질문을 스토리지에서 가져옵니다.키포인트는 QuestionService가 리턴한 객체를 통해 영웅 직업 응용프그램의 질문을 완전히 제어한다는 것입니다. 설문 유지보수는 질문 배열에서 객체를 추가, 업데이트 및 제거하는 간단한 작업입니다. src/app/question.service.ts import { Injectable } from '@angular/core'; import { DropdownQuestion } from './question-dropdown'; import ..
-
05 동적 폼(Dynamic Forms) 02앵귤러/04 폼(Forms) 2017. 11. 4. 11:50
질문 폼 컴포넌트이제 완성된 모델을 정의 했으므로 동적 폼을 나타내기 위해 컴포넌트를 만들 준비가 되었습니다.DynamicFormComponent는 폼의 진입점이며 주 컨테이너입니다. dynamic-form.component.html 저장 Saved the following values {{payLoad}} dynamic-form.component.ts import { Component, Input, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { QuestionBase } from './question-base'; import { QuestionControlService } from './questio..
-
05 동적 폼(Dynamic Forms) 01앵귤러/04 폼(Forms) 2017. 11. 4. 11:49
동적 폼(Dynamic Forms)수작업으로 폼을 만드는 데는 많은 비용과 시간이 소요될 수 있습니다. 특히 많은 양을 필요하고 서로 유사하며 급변하는 비즈니스 및 규정 요구사항을 충족시키기 위해 자주 변경됩니다.비즈니스 오브젝트 모델을 설명하는 메타 데이터를 기반으로 폼을 동적으로 작성하는 것이 더 경제적 일 수 있습니다.이 책은 formGroup을 사용하여 종전과 다른 컨트롤 타입과 유효성 검사를 사용하여 간단한 폼을 동적으로 표시하는 방법을 보여줍니다. 이것은 원시적인 시작입니다. 훨씬 더 다양한 질문, 보다 우아한 렌더링 및 탁월한 사용자 경험을 지원하기 위해 진화할 수 있습니다.이 책의 예는 고용을 원하는 영웅을 위한 온라인 응용프로그램 경험을 구축하는 동적 폼입니다. 대행사는 으용프로그램 절차..
-
04 리액티브 폼(Reactive Forms) 14앵귤러/04 폼(Forms) 2017. 10. 22. 21:19
결론이 페이지는 다음 내용을 다루었습니다.l 리액티브폼 컴포넌트 및 해당 템플릿을 작성하는 방법.l FormBuilder를 사용하여 리액티브 폼 코딩을 단순화하는 방법.l FormControls 그룹화.l FormControl 프로퍼티 검사하기.l patchValue 및 setValue를 사용한 데이터 설정l FormArray로 동적으로 그룹추가l FormControl의 값에 대한 변경사항 관찰l 폼 변경사항 저장최종 버전의 주요 파일은 다음과 같습니다. src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Reactive Forms ` }) export..
-
04 리액티브 폼(Reactive Forms) 13앵귤러/04 폼(Forms) 2017. 10. 22. 21:18
폼데이터 저장HeroDetailComponent는 사용자 입력을 캡처하지만 아무것도 하지 않습니다. 실제 응용프로그램에서, 당신은 영웅변경사항을 저장할 것입니다. 실제 앱에서는 저장되지 않은 변경 사항을 되돌리고 수정을 재개할 수 있을 것입니다. 이 섹션에서 두 가지 기능을 모두 구현하면 폼은 다음과 같이 표시될 것입니다. 저장이 샘플 응용프로그램에서 사용자가 폼을 제출하면 HeroDetailComponent는 영웅 데이터 모델의 인스턴스를 주입 된 HeroService의 save 메소드에 전달합니다. src/app/hero-detail.component.ts (onSubmit) onSubmit() { this.hero = this.prepareSaveHero(); this.heroService.upda..
-
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..