양식 유효성 검사를 위해 RxJS 및 TypeScript 사용

이전 글에서는 HTML 양식을 RxJS와 TypeScript로 처리하는 방법에 대해 설명했습니다.
반응식 방법을 사용하면 정적 형식으로 HTML 폼을 검증하는 기술과 강력한 RxJS 조작부호의 도움말을 보여 드리겠습니다.

HTML 양식

다음 HTML 양식을 시작점으로 정의합니다.

<div class="container">
  <div class="wrapper">
    <form class="form" novalidate>
      <div class="form-group needs-validation">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" required />
        <span class="invalid-feedback"></span>
      </div>
      <div class="form-group needs-validation">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" required />
        <span class="invalid-feedback"></span>
      </div>
      <button disabled id="submit" type="button" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

앞의 표지는 Bootstrap을 사용했는데 이것은 기능이 강한 CSS 프레임워크로 몇 가지 사용할 수 있는 스타일을 포함한다.동시에 우리는 Bootstrap Validation에 의존하여 다음 화면이 나타날 때 사용자에게 조작 가능한 피드백을 제공할 수 있다.

인증 규칙

실제 장면에서 HTML 양식에 유효성 검사 규칙 세트가 추가됩니다.위에서 정의한 HTML 코드는 전자 메일 주소 및 암호를 required 필드로 설정합니다.input 요소에 더 많은 검증 규칙을 추가하는 것에 관심이 있을 수 있습니다.이 경우 Form Input 속성을 확인하십시오.

TypeScript 모델 및 DOM 요소

HTML 양식과 연관된 데이터에 대한 모델을 정의하는 간단한 방법으로 TypeScript 인터페이스를 만듭니다.

// user.ts
export interface User {
  email?: string;
  password?: string;
}

그런 다음 사용자 모델을 저장할 변수를 생성할 수 있습니다.

let userModel: User = {};

이제 가장 중요한 DOM 요소에 대한 액세스를 제공하기 위해 변수를 설명하려고 합니다.

// DOM Elements - declaration
let emailInput: HTMLInputElement;
let passwordInput: HTMLInputElement;
let buttonElement: HTMLButtonElement;

TypeScript 세계에서는 변수에 적합한 데이터 유형을 설정하는 것이 중요합니다.이 예에서 우리는 HTMLInputElement과 HTMLButtonElement 인터페이스를 사용한다.

이 두 인터페이스는 각각 <input>과 <button> 요소를 조작하는 데 사용되는 특수한 속성과 방법을 제공한다.

입력 이벤트는 관찰할 수 있습니다

반응식 프로그래밍 방법에 따라 HTML 폼의 모든 이벤트를 처리하기 위해 흐름과 관찰 대상을 고려해야 합니다.

// DOM Elements validation as Observables - declaration
let emailValidation$: Observable<InputEvent>;
let passwordValidation$: Observable<InputEvent>;
let submit$: Observable<MouseEvent>;

RxJS는 fromEvent 연산자(작성 연산자)를 제공하여 모든 이벤트를 관찰 가능한 이벤트로 변환합니다.

// DOM events as Observables - assignation
emailValidation$ = fromEvent<InputEvent>(emailInput, "keyup");
passwordValidation$ = fromEvent<InputEvent>(passwordInput, "keyup");
submit$ = fromEvent<MouseEvent>(buttonElement, "click");

지금부터 우리는 keyup 요소로부터 <input> 사건을 접수할 준비가 되어 있다.이는 click 구성 요소의 <button> 이벤트에도 적용됩니다.
다음 절에서 우리가 이미 토론한 사건의 흐름을 어떻게 처리하는지 봅시다.

관찰 가능한 것으로 인증 입력

<input>사건을 처리하기 위해 두 개의 흐름이 있다는 것을 명심하세요.이 두 변수는 emailValidation$과 passwordValidation$ 변수에서 모두 사용할 수 있다.
동일한 유효성 검사 규칙을 적용했기 때문에 다음과 같이 필수 규칙을 처리하는 흐름을 만들 수 있습니다.

const inputsValidation$ = merge(emailValidation$, passwordValidation$);

앞의 코드 세그먼트는 여러 관측 값을 단일 관측 값으로 변환하는 데 사용할 수 있는 RxJS의 merge 연산자 사용법을 보여줍니다.
이런 방식을 통해 우리는 <input>개의 사건을 처리할 블록을 정의할 수 있다.

// Inputs Validation processing
inputsValidation$
  .pipe(
    map((event: InputEvent) => event.target as HTMLInputElement),
    map((input: HTMLInputElement) => ({ input, validity: input.validity }))
  )
  .subscribe(({ input, validity }) => {
    console.log({ input, validity });
    validateAsRequired(input, validity);
  });

다음은 현재 벌어지고 있는 일입니다.

inputsValidation$은 관찰할 수 있습니다.이메일 또는 암호 입력 이벤트는 RxJS(가변 파이프 조작자)로 처리됩니다.

pipe () 함수는 연산자를 하나하나 함께 사용할 수 있는 읽을 수 있는 방법을 제공합니다.

첫 번째 맵() 조작부호는 이벤트 대상에'변환'을 적용합니다. target 속성을 추출하여 HTMLInputElement으로 되돌려줍니다.

두 번째 맵() 조작부호는 HTMLInputElement을 입력으로 하고 이를 다음과 같은 내용을 포함하는 새로운 대상으로 전환한다. {input: HTMLInputElement, validity: ValidityState}.

Observable을 실행하려면 subscribe() 호출이 필요합니다.이것은 최신 map 연산자가 되돌아오는 최종 대상을 수신하고 validateAsRequired 함수를 호출하는 데 사용됩니다.

오류 메시지를 표시하거나 숨기기 위한 DOM 처리

다행히도, 자바스크립트 세계에서, 우리는 DOM에 접근하고 업데이트할 API 그룹을 찾을 수 있다.이러한 요소 중 일부를 사용하여 클래스를 추가하거나 제거하고 <span> 요소에 표시된 텍스트를 업데이트합니다.

function validateAsRequired(input: HTMLInputElement, validity: ValidityState) {
  const formGroup = input.closest(".form-group") as HTMLDivElement;
  const labelElement = formGroup.querySelector("label") as HTMLLabelElement;
  const errorElement = formGroup.querySelector(
    ".invalid-feedback"
  ) as HTMLSpanElement;
  const valueMissing = validity.valueMissing;
  if (valueMissing) {
    formGroup.classList.remove("needs-validation");
    formGroup.classList.add("was-validated");
    errorElement.textContent = `${labelElement.textContent} is required.`;
  } else {
    formGroup.classList.remove("was-validated");
    formGroup.classList.add("needs-validation");
  }
}

마찬가지로 올바른 유형이 있는지 확인한 다음 올바른 함수 호출을 실행하고 DOM 요소의 속성에 액세스하려면 사용하는 인터페이스에 주의하십시오.

제출 단추 검증은 관찰할 수 있습니다

[전송] 버튼은 HTML 양식에서 유효성 검사 규칙을 충족하는 경우에만 사용할 수 있습니다.
비활성화된 속성을 다시 수동으로 관리합니다.

const submitValidation$ = combineLatest(emailValidation$, passwordValidation$);

앞의 코드는 RxJS에서 combineLatest 연산자의 사용을 보여 줍니다. 이것은 모든 관찰 대상이 마지막으로 보낸 값에서 값을 보낼 수 있습니다.

// Submit button validation processing
submitValidation$
  .pipe(
    map(
      ([emailEvent, passwordEvent]) =>
        [emailEvent.target, passwordEvent.target] as [
          HTMLInputElement,
          HTMLInputElement
        ]
    ),
    map(
      ([emailInput, passwordInput]) =>
        emailInput.validity.valueMissing || passwordInput.validity.valueMissing
    )
  )
  .subscribe(formInvalid => {
    console.log({ formInvalid });
    if (formInvalid) {
      buttonElement.setAttribute("disabled", "true");
    } else {
      buttonElement.removeAttribute("disabled");
    }
  });

코드 블록에서 무슨 일이 일어났습니까?

submitValidation$은 관찰할 수 있는 대상입니다. '전자메일' 과 '비밀번호' 를 동시에 <input>개의 이벤트를 보냅니다.

마찬가지로 pipe () 함수는 읽을 수 있는 방식을 제공하여 연산자

을 동시에 사용할 수 있다

첫 번째 매핑 연산자는 두 이벤트를 모두 [InputEvent, InputEvent]으로 하고 이를 [HTMLInputElement, HTMLInputElement]으로 변환한다(<input> 요소를 포함하는 TypeScript 모듈로'이메일'과'password'에 사용한다),

두 번째 매핑 연산자는 [HTMLInputElement, HTMLElement] 모듈을 입력으로 하고 이를 부울 값으로 변환하여 HTML 양식이 "유효하지 않음"인지 여부를 나타냅니다.

subscribe() 호출은 Observable을 실행합니다.이것은 제출 단추에 '비활성화됨' 속성을 추가하거나 삭제하는 데 사용되는 부울 값을 수신합니다.

커밋 작업 처리 중

HTML 양식은 검증된 데이터를 보낼 준비가 되었습니다.다음은'클릭'사건 처리를 상세하게 소개했다.

submit$.subscribe(() => {
  const email = emailInput.value;
  const password = passwordInput.value;
  userModel = { email, password };
  console.log("Sending User Model", { userModel });
});

유효한 데이터가 있기 때문에 단추가 활성화되면 이 관찰 가능한 동작을 실행할 수 있음을 확인할 수 있습니다.

소스 코드 항목

StackBlitz에서 실행 중인 전체 항목을 찾습니다.브라우저의 콘솔을 열어 결과를 보는 것을 잊지 마세요.
너는 계속 나를 주목할 수 있다. GitHub은 나의 일에 대해 더 많은 정보를 얻을 수 있다.