encapsulated-reactive-form.ts

// カプセル化してるモジュール部分
type LengthError = (length: number) => string;
type ValidationWithError = {
  validations: ValidationErrors[],
  errorMessage: string | LengthError
}

const requiredF = (
  fieldText: string
): ValidationWithError => {
  return {
    validations: [Validators.required],
    errorMessage: `${fieldText}を入力してください`,
  };
};

const maxLengthF = (
  maxLength: number,
): ValidationErrors => {
  return {
    validation: [Validators.maxLength(maxLength)],
    errorMessage: (current: number) => `${maxLength - current}文字超過しています`,
  };
};

// こいつらを使って内部的にFormGroup ≒ FormGroupWithFormControlWithValidationError を生成する
requiredF('メールアドレス');
maxLengthF(100);

type FormControlWithValicationError = {
  formControl: FormControl,
  valicationWithError: ValidationWithError
}

// FormNames ではなく keyof S とかになる
type FormGroupWithFormControlWithValidationError = {
    [P in FormNames]: FormControlWithValicationError 
}

// TODO: FormNameを後から抽象化
const createSetErrorMessage = (formGroupWithFormControlWithValidationError: FormGroupWithFormControlWithValidationError) => (formName: FormNames): void => {
  const formControlWithValicationError = formGroupWithFormControlWithValidationError[formName];
  const form = formControlWithValicationError.formControl;
  // TODO: 本当は上位概念から、一番優先度が高いエラーを出す。
  const errorMessage = formControlWithValicationError.valicationWithError.errorMessage;

  if (form === null) {
    return;
  }

  if (form.touched && form.errors && typeof errorMessage === 'string') {
    errors[formName] = errorMessage;
  // TODO: ValidationWithErrorにエラーの type を持たせて、それで分岐させよう。
  } else if (typeof errorMessages === 'function') {
    const lengthError = errorMessage as LengthError;
    errors[formName] = lengthError((form.value as string).length);
  } else {
    errors[formName] = '';
  }
}

// ここから使用イメージ

/*
  constructor() {
    // FormGroupWithFormControlWithValidationError をせっせと作る。
    // 作るイメージ・これだけで終わり。FormGroupとかFormControlとか意識させない。
    const xxx = createFormGroupWithFormControlWithValidationError([
      { email: {
        initialValue: '初期値', 
        validationWithErrors: [requiredF('メールアドレス'), maxLengthF(100)]
      },
      password: {
        initialValue: '初期値', 
        validationWithErrors: [requiredF('パスワード'), maxLengthF(10)]
      },
    };
  
   // ※ FormGroupは直接触らない。HTML用に保持するだけ。基本隠蔽されてる。
      this.LoginForm = getFormGroup(formGroupWithFormControlWithValidationError);
   }

   // 旧 getErrorMessage
   setErrorMessage(formName: FormName) {
      // カリー化じゃなくて、複引数でもアリ
      return createSetErrorMessage(formGroupWithFormControlWithValidationError)(formName);
   }
  
   // テストイメージ
   it(メールアドレスが空のとき、メールアドレスを入力してくださいエラーがでる)
   assert(getError('email', '試したい値', xxx) === 'メールアドレスを入力してください'))
    
   // エラーを起こす魔法メモ
   targetFormControl.markAsTouched({
     onlySelf: true,
   });
*/