Web Components 양식 개요

    Web Components의 양식 구성 요소는 모든 응용 프로그램의 요구 사항에 맞는 연락처 양식 및/또는 등록 페이지를 설정하는 데 사용됩니다. Web Components 양식 유효성 검사를 쉽게 제공하고, 양식 방향을 정의하고, 원하는 레이아웃을 구성하거나 사용자 정의할 수도 있습니다. Web Components 양식 구성 요소는 사용자 작업에 응답할 수 있는 기회를 제공하는 이벤트도 노출합니다.

    Web Components Form Example

    다음 예는 내부에 일부 입력, 버튼 및 확인란이 있는 IgcFormComponent 나타냅니다.

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

    ​IgcFormComponent 사용하기 전에 다음과 같이 등록해야 합니다.

    import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

    ​IgcFormComponent 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

    양식 데이터는 다음 구성요소에 대해 수집됩니다.

    양식 컨트롤이 유효하지 않으면 양식이 제출되지 않고 오류 메시지가 표시됩니다. 양식을 제출할 때 양식 요소의 유효성을 검사하지 않도록 지정하려면 novalidate ~에 귀속시키다 IgcFormComponent 요소:

      <igc-form novalidate>
    <!-- Form content -->
  </igc-form>

    이벤트

    Form 구성 요소는 다음 이벤트를 발생시킵니다.

    • 제출 - 양식이 제출될 때 발생합니다.
    • 재설정 - 양식이 재설정될 때 발생합니다.

    다음은 Submit 이벤트에 대한 이벤트 리스너를 추가하는 방법을 보여주는 예입니다.

    document.addEventListener('igcSubmit', function (event) {
  const customEvent = event as CustomEvent<FormData>;
  console.log(customEvent.detail);
});

    Methods

    Form 구성 요소는 다음 메서드를 노출합니다.

    방법 설명
    Submit 양식 데이터를 제출합니다.
    Reset 양식 데이터를 재설정합니다.
    GetFormData 양식 데이터를 수집하고 단일 FormData 개체를 반환합니다.
    reportValidity 요소의 하위 컨트롤이 유효성 검사 제약 조건을 충족하는지 여부를 반환합니다.

    API References

    Additional Resources