Practical Accumulation

1. 이 포스트는 검증 상태 구독하기 시리즈의 연속이다. 2. 여기서는 지난 포스트에서 작성한 코드로 검증상태를 구독하는 로직을 작성한다. 3. 검증결과를 구독하는 부분 작성한다. 3-1 FormGroup, FormControl에는 statusChanges라는 속성이 존재한다. 3-2 이것은 둘다 AbstractControl 추상클래스를 상속하고 있기 때문이다. 3-2-1 이 부모클래스에서 검증구독과 검증의 상태값을 모두 관리하고 있다. 3-3 FormGroup, FormControl의 코드를 보면 Form 구조에 대한 관리 기능과 접근 메소드가 대부분을 차지한다. 3-4 코드에서 중요한 부분은 statusChange를 구독하는 ngOnInit이다. 3-4-0 검증결과값은 검증에 따라서 'VALID', ..

1. 이 포스트는 Angular의 검증 절보를 구독하는 방법에 대해서 설명한다. 너무 길어지니 시리즈로 작성한다. 1-1 여기에서는 지난 포스트와 동일한 방식으로 재사용 가능한 클래스를 작성하는 것 까지 한다. 1-2 다음 포스트에서 실제로 검증상태를 구독하고 구독에 따른 적절한 처리를 하는 방법을 다룬다. 2. Angular는 Observable이라는 강력한 RxJS라이브러리르 사용한다. 2-1 그래서 상당히 편리하게 실시간으로 변경된 정보를 수신하여 처리할 수 있다. 2-2 예를 들면, url의 변화에 따른 로직을 처리하거나 한 곳에 데이터를 여러곳에서 수신하는 기능을 구현할 수 있다. 3. 검증에도 마찬가지로 각 FormControl이나 FormGroup의 상태를 구독할 수 있는 기능을 가지고 있다..

1. 이번 포스트는 지난 포스트의 사용자 정의 검증로직을 좀 더 범용적으로 사용할 수 있도록 변경한다. 1-1 지난 포스트의 연속이므로 이전 포스트를 읽는 게 좋다. 2. 범용로직을 작성한다. 2-0 검증로직의 분리를 위해 class를 하나 생성하였다. 2-1 이 class에 여러개의 검증로직을 정의하여 특정한 form에 종속되지 않도록 작성하다. 2-1-1 독립성을 유지하기 위해서는 클래스는 독립성이 보장되어야 하므로 static 메소드를 사용해야 한다. 2-1-1-1 검증로직을 그대로 복사하여 붙여 넣었다. import { AbstractControl } from '@angular/forms'; export class PasswordValidators { static isMatch(form: Abst..

1. 하나의 form control을 검증하는 게 아닌 form 전체에 대한 검증에 대한 포스트이다. 1-1 Java의 경우에도 Annoation을 생성하여 Form Control 상호 검증이 가능한데 유사한 개념이다. 1-2 javascript(typescript)의 경우는 functional programming 태생이라 간단히 함수만 추가로 구현하면 된다. 1-3 typescript는 interface를 사용하면 간결하기 때문에 많이 사용하는데, 웃긴건 너무 많이 너무 타입이 많다. 1-3-1 그래서 타입 정의 찾아다닌다고 짜증나는 경우가 생긴다. 2. 프로젝트를 하나 생성하고 검증을 구현할 컴포넌트 하나를 생성한다. 2-1 이제 template을 작성한다. 2-1-1 passwordconfirm...

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 1. 포스트로 완결성을 위해 별로 중요하지 않은 몇 가지를 작성한다. 2. form 전체에 error가 없을 때 submit버튼이 활성화 되도록 하기 2-1 카드 컴포넌트의 submit 버튼을 disabled 속성에 form group의 valid속성을 사용했다. ... Submit Reset 3. Reset 버튼을 누르면 모든 값을 초기화하는 방법은 2가지가 있는데, 3-1 현재의 reest 버튼 처럼 type을 reset으로 두는 것이다. 버튼을 누르면 모두 초기화된다. 3-2 혹시 브라우저의 호환성이 문제가 되면 아래처럼 click이벤트를 달아 주고 3-2-1 카드 컴포넌트 클래스에 onReset() 메소드 내에..

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 1. 이제 모두 설정했으니 에러 결과를 가지고 적절하게 화면에 안내구문을 표출하는 것만 남았다. 1-1 근데 이 부분이 제일 지랄맞는 부분이다. 지저분하기 때문에 메시지를 위한 공용 모듈을 생성을 것을 추천한다. 1-2 추가로 각 form-control의 에러표출하는 부분은 control 개수만큼 필요하기 때문에 validator 컴포넌트도 필요하다. 2. 작성순서 2-1 메시지를 생성하기 위한 validator 서비스를 생성한다. 2-1-1 static으로 생성해도 좋고 DI를 해도 좋다. 어차피 하나의 객체를 공유하기 때문에 상관없다. 2-2 각 control의 에러 표출을 위한 validaotr 컴포넌트도 생성한..

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 0-1 여기서는 화면의 사용자 입력과 매핑되는 form control을 생성한다. 1. 작성 순서는 1-1 신용카드 class에서 form group, form control 생성 1-2 생성한 form 속성을 신용카드 template에 매핑한다. 2. 화면을 만들었으니 이제 입력을 관리할 수 있는 form-control이 필요하다. 2-1 이것을 만드는 이유는 입력에 대해서 세부적으로 조작을 하기 위한 것이다. 2-2 서버로 보내기 전에 미리 입력값을 검증하고 어떤 문제가 있는지를 표출하는 부분은 중요하다. 2-3 form group과 form control은 form builder로 만든다. 2-4 우선 app.m..

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 0-0 이 포스트에서는 ngx-mask를 사용하여 입력을 정의하는 내용을 다룬다. 0-1 ngx-mask는 사용자가 입력을 제대로 할 수 있도록 도와주는 기능을 한다. 0-2 예제와 기능은 아래 링크를 참조한다. 1. 작성 순서 1-1 화면이 만들어졌으니 이제 ngx-mask를 사용하여 입력 패턴을 설정한다. 1-2 먼저 ngx-mask를 사용하기 위해 app.module.ts에 import 한다. 1-3 신용카드 컴포넌트 template에 사용자 입력 제약 설정을 한다. 2. ngx-mask import하기 2-1 다른 라이브러리와 마찬가지로 import 해야 한다. 2-1-0 초기화에 대한 부분으 ngx-mask ..