동적 형식의 매개변수화된 유효성 검사기

TL;DR
We are building the documentation of @myndpm/dyn-forms at mynd.dev and we've added support for a variety of custom functions like Validators, AsyncValidators, Matchers, Conditions and more.

모든 양식의 다음으로 중요한 부분은 유효성 검사입니다. 일명 Validators 및 AsyncValidators , 그리고 우리는 그것들을 구현하는 좋은 방법을 연구하는 데 시간을 들이고 가장 선언적인 방법을 선택했습니다.

createMatConfig('INPUT', {
  name: 'quantity',
  validators: ['required', ['min', 1] ],
  asyncValidators: ['myAsyncValidator'],

각도 검증기

Angular는 기본값을 제공합니다 Validators Reactive Forms에서 프로그래밍 방식으로 소비하는 데 익숙하지만 그 중 일부는 ValidatorFn와 같은 Validator Functions( Validators.required )입니다. , 일부는 (args) => ValidatorFn와 같은 필수 매개변수를 기반으로 Validator를 구축하는 Validator Factory( Validators.minLength(4) )입니다. .

유효성 검사기 기능의 정의는 다음과 같습니다.

(control: AbstractControl) => ValidationErrors | null

유효성을 검사할 컨트롤을 수신하고 null를 반환합니다. 값이 유효한 경우 또는 { [error: string]: any } 형식의 오류 개체

유효성 검사기 팩토리는 일부 입력 매개변수에 따라 유효성 검사기 기능을 구축하는 고차 기능입니다.

function minLength(minLength: number): ValidatorFn {
  return (control: AbstractControl) => {
    return (control.value && control.value.length < minLength)
      ? { minLength: true } // invalid
      : null; // valid
  }
}

보시다시피 이것은 함수를 매개변수화하는 매우 좋은 방법이므로 id 및 공장 fn :

export interface DynControlValidator {
  id: string;
  fn: (...args: any[]) => ValidatorFn;
}

id 구성 개체에서 사용할 문자열입니다. 기본적으로 @myndpm/dyn-forms 기본 Angular Validators에 우리가 알고 있는 것과 같은 이름을 제공하십시오: required , requiredTrue , email , pattern , minLength , maxLength , min 및 max .

Config Object에서 사용하는 표기법은 다음과 같습니다.

// without parameters
validators: ['required'],

// with parameters as array
validators: ['required', ['min', 1] ],

// with parameters as object
validators: { required: null, minLength: 4 },

// with an inline ValidatorFn or ValidatorFn factory
validators: [myValidatorFn, myValidatorFactory(args)],

이러한 다른 표기법을 지원하는 것은 비싸지 않으며 다양한 종류의 시스템이나 개발자 취향에 유용할 수 있습니다.

사용자 정의 유효성 검사기

언급했듯이 ValidatorFn 공장 id 및 fn . 따라서 다음과 같은 코드로 모듈에서 쉽게 제공할 수 있습니다.

import { AbstractControl, ValidatorFn } from '@angular/forms';
import { DynFormsModule } from '@myndpm/dyn-forms';
import { DynControlValidator } from '@myndpm/dyn-forms/core';

const validators: DynControlValidator[] = [
  {
    id: 'email',
    fn: (): ValidatorFn => {
      return (control: AbstractControl) => {
        // implement my validator
        // to return { email: true } | null;
      }
    }
  }
];

@NgModule({
  imports: [
    DynFormsModule.forFeature({ validators, priority: 100 });

참고 priority 기본 유효성 검사기를 재정의하는 매개변수(가중치는 0) 우리는 다음 기사에서 우선 순위를 다룰 것입니다.

비동기 검사기

비동기 유효성 검사기를 제공하는 것도 동일한 방식으로 작동합니다. 귀하는 fn id 구성 개체에서 사용합니다.

createMatConfig('INPUT', {
  name: 'quantity',
  validators: ['required'],
  asyncValidators: ['myAsyncValidatorId'],

AsyncValidator 팩토리에 인수를 제공해야 하는 경우 다음을 사용할 수 있습니다.

// single argument which can be an object
asyncValidators: [['myAsyncValidatorId', args]],
// your factory will receive fn(args)

// multiple arguments in array to be destructured
asyncValidators: [['myAsyncValidatorId', [arg1, arg2]]],
// your factory will receive fn(arg1, arg2)

커스텀 핸들러

이 표기법을 사용하여 동적 양식에 필요한 여러 종류의 기능에 대한 지원을 추가했습니다. Validators 및 AsyncValidators 방금 본 것처럼 Matchers 및 Conditions 일부 특수 요구 사항에 따라 컨트롤을 조작하고 ParamFns DynControls의 매개변수에도 기능을 주입합니다.

우리는 다음 장에서 조건부 실행에 대해 알아볼 것입니다.
한편, 이 표기법에 대해 어떻게 생각하십니까?

//추신. 직원 모집합니다!