Blazor 양식 개요

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

    Blazor Form Example

    다음 예는 내부에 일부 입력, 버튼 및 체크박스가 있는 IgbForm 나타냅니다.

    Usage

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbFormModule));

    또한 IgbForm 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

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

    <IgbForm NoValidate="true" />

    이벤트

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

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

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

    Methods

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

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

    API References

    Additional Resources