분류 전체보기
-
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의 일부가 아닙니다.이는 컴포넌트 클래스에서 적은 코딩을 의미하지만, 템플릿 기반..
-
04 리액티브 폼(Reactive Forms) 01앵귤러/04 폼(Forms) 2017. 10. 2. 11:06
리액티브 폼(Reactive Forms)리액티브 폼은 리액티브 스타일로 폼을 만들기 위한 Angular기법입니다. 이 가이드에서는 "Hero Detail Editor"폼을 작성하는 단계를 수행함으로써 리액티브 폼에 대해 설명합니다.리액티브 Forms 라이브 예제 / 다운로드 예제를 사용해 보십시오.리액티브 폼 데모 / 다운로드 예제 버전을 실행해 볼 수 있으며, 상단의 "데모 피커"에서 중간 단계 중 하나를 선택할 수도 있습니다. 리액티브 폼 소개Angular는 리액티브 폼과 템플릿 기반 폼의 두 가지 폼-구축 기술을 제공합니다. 두 기술은 @angular/forms 라이브러리에 속하며 폼컨트롤 클래스의 공통세트를 공유합니다.그러나 그들은 철학, 프로그래밍 스타일, 기법에서 두드러지게 엇갈린다. Reac..
-
03 폼 유효성검사 04앵귤러/04 폼(Forms) 2017. 9. 24. 17:42
제어 상태 CSS 클래스AngularJS와 마찬가지로 Angular는 많은 컨트롤 프로퍼티를 CSS 클래스로 폼 컨트롤 엘리먼트에 자동으로 반영합니다. 이 클래스를 사용하여 폼의 상태에 따라 양식 컨트롤 엘리먼트를 장식할 수 있습니다. 현재 지원되는 클래스는 다음과 같습니다.l .ng-validl .ng-invalidl .ng-pendingl .ng-pristinel .ng-dirtyl .ng-untouchedl .ng-touched영웅 폼은 .ng-valid 및 .ng-invalid 클래스를 사용하여 각 양식 컨트롤의 테두리 색을 설정합니다. forms.css (status classes) .ng-valid[required], .ng-valid.required { border-left: 5px soli..
-
03 폼 유효성검사 03앵귤러/04 폼(Forms) 2017. 9. 24. 17:41
사용자정의 유효성검사기내장 유효성 검사기가 응용프로그램의 정확한 사용사례와 항상 일치하지는 않기 때문에 사용자 정의 유효성검사기를 만드는 것이 좋습니다.이 가이드의 이전 예제에서 forbiddenNameValidator 함수를 보겠습니다. 이 함수의 정의는 다음과 같습니다. shared/forbidden-name.directive.ts (forbiddenNameValidator) /** A hero's name can't match the given regular expression */ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): {[key: string]: a..
-
03 폼 유효성검사 02앵귤러/04 폼(Forms) 2017. 9. 24. 17:41
반응형 폼 유효성검사반응형 폼에서, 진실의 근원은 컴포넌트 클래스입니다. 템플릿의 어트리뷰트를 통해 유효성검사를 추가하는 대신 유효성검사 함수를 컴포넌트 클래스의 폼 컨트롤 모델에 직접 추가합니다. 그런 다음 Angular는 컨트롤의 값이 변경될 때마다 이 함수를 호출합니다. 유효성검사 함수유효성검사 함수는 동기 유효성검사기와 비동기 유효성검사기 두 가지 유형이 있습니다.l 동기 유효성검사기: 컨트롤 인스턴스를 사용하고 즉시 유효성검사 오류집합 또는 null 중 하나를 리턴하는 함수. FormControl을 인스턴스화할 때 두 번째 인수로 이를 전달할 수 있습니다.l 비동기 유효성 검사기: 컨트롤 인스턴스를 사용하고 나중에 유효성검사 오류 또는 null 집합을 던지는 Promise 또는 Observabl..
-
03 폼 유효성검사 01앵귤러/04 폼(Forms) 2017. 9. 24. 17:40
폼 유효성검사정확성과 완전성을 위해 사용자 입력을 검증하여 전반적인 데이터 품질을 향상시킵니다.이 페이지는 UI에서 사용자 입력의 유효성을 검사하고 반응형 및 템플릿기반 폼을 사용하여 유용한 유효성검사 메시지를 표시하는 방법을 보여줍니다. 두 가지 폼모듈에 대한 몇 가지 기본지식이 필요합니다. 폼을 처음 사용하는 경우 폼 가이드 및 반응 폼 가이드를 리뷰하십시오. 템플릿 기반 유효성검사템플릿 기반 폼에 유효성검사를 추가하려면 네이티브 HTML 폼 유효성검사에서와 동일한 유효성검사 어트리뷰트를 추가해야 합니다. Angular는 이러한 어트리뷰트를 프레임워크의 유효성검사 기능과 일치시키는 디렉티브를 사용합니다.폼 컨트롤의 값이 변경 될 때마다 Angular는 유효성 검사를 실행하고 유효성 검사 오류 목록을 ..