앵귤러
-
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는 유효성 검사를 실행하고 유효성 검사 오류 목록을 ..
-
02 템플릿기반 폼(Template-driven Forms) 06앵귤러/04 폼(Forms) 2017. 9. 3. 13:30
ngSubmit으로 폼 제출폼을 작성한 후에 폼을 제출할 수 있어야합니다. 폼 하단의 Submit 버튼은 아무것도 하지 않지만 유형 (type = "submit")으로 인해 폼 제출을 트리거합니다."폼 제출"은 현재 쓸모가 없습니다. 유용하게 사용하려면 폼의 ngSubmit 이벤트 프로퍼티를 영웅 폼 컴포넌트의 onSubmit()메서드에 바인딩합니다. src/app/hero-form.component.html (ngSubmit) 당신은 이미 템플릿 참조변수인 #heroForm을 정의하고 값을 "ngForm"으로 초기화했습니다. 이제 이 변수를 사용하여 제출 버튼으로 폼에 액세스합니다.heroForm 변수를 통해 폼의 전체 유효성을 이벤트바인딩을 사용하여 버튼의 disabled 프로퍼티에 바인딩합니다. 코..
-
02 템플릿기반 폼(Template-driven Forms) 05앵귤러/04 폼(Forms) 2017. 9. 3. 13:28
시각적 피드백을위한 맞춤 CSS 추가입력란 왼쪽의 색상막대를 사용하여 필수입력란과 잘못된 데이터를 동시에 표시할 수 있습니다. 이러한 클래스 정의를 프로젝트에 추가한 새 forms.css 파일을 index.html파일이 있는 폴더에 추가하여 이 효과를 얻을 수 있습니다. src/forms.css .ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green */ } .ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ } 이 스타일시트를 포함하도록 index.html의 를 수정하십시오. src/index.html (styles) 유효성 검사 오류 메시지 표..
-
02 템플릿기반 폼(Template-driven Forms) 04앵귤러/04 폼(Forms) 2017. 9. 3. 13:20
ngModel을 사용한 양방향 데이터 바인딩지금 바로 앱을 실행하면 조금 실망할 것입니다. Hero를 바인딩하지 않았기 때문에 영웅 데이터가 표시되지 않습니다. 이전 페이지에서 표시하는 법을 배웠습니다. 데이터표시 섹션에서 프로퍼티 바인딩을 배웠습니다. 사용자입력 섹션에서 이벤트바인딩을 사용하여 DOM 이벤트를 수신하는 방법과 표시된 값으로 컴포넌트 프로퍼티를 업데이트하는 방법을 배웠습니다.이제는 동시에 표시하고 듣고 추출해야합니다.이미 알고있는 기술을 사용할 수 있지만 새구문[(ngModel)]을 사용하면 폼을 모델에 쉽게 바인딩 할 수 있습니다.Name의 태그를 찾아 다음과 같이 수정하십시오. src/app/hero-form.component.html (excerpt) TODO: remove this..