앵귤러 폼모델과 폼지시자

02 Jan 2018

Reading time ~2 minutes

모델 클래스와 폼지시자

모든 내용은 조우진 저자의 앵귤러 첫걸음에 기초한 정보입니다. 간략한 개인 정리용이며 상업용이 아닙니다. 우리가 사용했던 양방향바인잉을 위한 NgModel 지시자는 사실 FormsModule에 포함되어 있었다. 그럼으로 FormsModule을 임포트 해줘야한다.

폼 모델(FormModel)

폼을 다루는 요소의 핵심은 FormControl클래스이다. 이것은 폼에서 사용자 입력을 받는 모든 요소에 일대일로 대응하는 모델 클래스 이다.

폼의 상태를 담고 있는 것 들이다.
FormControl는 AbstractControl을 상속받는다.
AbstractControl를 상속받는 FormGroup과 FormArray는 입력 폼을 묶어서 관리할때 사용하는 클래스 이다.

`AbstractControl` 클래스

  class AbstractControl {
    constructor(validator: ValidatorFn | null, asyncValidator: AsyncValidatorFn | null)
    get value: any
    validator: ValidatorFn | null
    asyncValidator: AsyncValidatorFn | null
    get parent: FormGroup | FormArray
    get status: string
    get valid: boolean
    get invalid: boolean
    get pending: boolean
    get disabled: boolean
    get enabled: boolean
    get errors: ValidationErrors | null
    get pristine: boolean
    get dirty: boolean
    get touched: boolean
    get untouched: boolean

    //기본제공 Observable
    get valueChanges: Observable<any>
    get statusChanges: Observable<any>

    get updateOn: FormHooks
    setValidators(newValidator: ValidatorFn | ValidatorFn[] | null): void
    setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[]): void
    clearValidators(): void
    clearAsyncValidators(): void
    markAsTouched(opts: {...}): void
    markAsUntouched(opts: {...}): void
    markAsDirty(opts: {...}): void
    markAsPristine(opts: {...}): void
    markAsPending(opts: {...}): void
    disable(opts: {...}): void
    enable(opts: {...}): void
    setParent(parent: FormGroup | FormArray): void
    setValue(value: any, options?: Object): void
    patchValue(value: any, options?: Object): void
    reset(value?: any, options?: Object): void
    updateValueAndValidity(opts: {...}): void
    setErrors(errors: ValidationErrors | null, opts: {...}): void
    get(path: Array<string | number> | string): AbstractControl | null
    getError(errorCode: string, path?: string[]): any
    hasError(errorCode: string, path?: string[]): boolean
    get root: AbstractControl
  }

폼 지시자(FormDirective)

템플릿의 입력 요소에 속성으로 직접 선언할 때 사용합니다. 대표적인 지시자로는 NgModel 이 있습니다.

모든 지시자들은 AbstractControlDirective를 상속받습니다.
결론적으로 폼의 지시자는 폼모델을 속성으로 포함하고 실제 로직을 수행, 관리하는 클래스 이다.

모델 주도 폼

반응형 폼 방식은 템플릿 주도 폼이 템플릿에 선언된 지시자를 기준으로 하여 내부적으로 알아서 FormControl을 만들고 FormGroup을 구성하였던 것을 컴포넌트에서 우리가 직접 작성하는 것 뿐입니다.

ReativeFormsModule

반응형 폼을 만들기 위해 FormModule대신에 ReativeFormsModule을 임포트합니다.

클래스명	선택자이름	설명	비고
FormControlDirective	formControl	FormControl 객체 바인딩	독립
FormGroupDirective	formGroup	FormGroup 객체 바인딩	독립
FormControlName	formControlName	FormGroup에 포함된 FormControl 객체 바인딩	하위요소 바인딩
FormGroupName	formGroupName	FormGroup에 포함된 FormGroup 객체 바인딩	하위요소 바인딩
FormArrayName	formArrayName	FormGroup에 포함된 FormArray 객체 바인딩	하위요소 바인딩

FormBuilder

ReativeFormsModule은 컴포넌트에서 폼을 쉽게 만들 수 있도록 FormBuilder 서비스를 제공합니다.

angular