EditForm と入力コンポーネント

導入

素朴なフォームは動きますが、実務では「必須チェック」「型に合った入力欄」「送信の一括ハンドリング」が欲しくなります。Blazorはそのための専用部品EditFormと、InputTextなどの入力コンポーネントを用意しています。

説明

フォームの対象となるモデル（データを入れるクラス）を用意し、EditFormで包みます。入力欄はInputTextなどのコンポーネントを使い、@bind-Valueでモデルのプロパティに結びます。

<EditForm Model="contact" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />

    <label>お名前</label>
    <InputText @bind-Value="contact.Name" />

    <label>メール</label>
    <InputText @bind-Value="contact.Email" />

    <button type="submit">送信</button>
</EditForm>

@code {
    private Contact contact = new();

    private void HandleSubmit()
    {
        // 検証OKのときだけ呼ばれる
    }

    public class Contact
    {
        public string Name { get; set; } = "";
        public string Email { get; set; } = "";
    }
}

• EditForm Model="..."でフォーム全体を対象モデルに結びつける
• 入力欄はInputText／InputNumber／InputCheckbox／InputSelect／InputDateなどを使い分ける
• 値の結び付けは@bind-Value="モデル.プロパティ"
• OnValidSubmitは検証OKのときだけ呼ばれる（OnInvalidSubmitもある）

まとめ

• フォームはEditForm＋モデル＋InputXxxコンポーネントで組む
• 値は@bind-Valueでモデルのプロパティに結ぶ
• 送信はOnValidSubmit（検証を通ったときだけ）で受ける

次回: そのモデルに「ルール」を付けて、自動で検証します。