Blazorでフォームの再検証を行うには？

Question

したいこと

• カスタム検証(融点(Melting point)<=沸点(Boiling point))を定義したクラスがあり、この入力フォームを作成しています。
• このクラスの入力フォームを作ったときMelting point入力→Boiling pointとするとMelting pointの検証エラーが消えません。
• Boiling point入力時にMelting pointの再検証を行うにはどうすればよいでしょうか？
• ASP.NET MVCだと「TryValidateModel」というのがあるようなのですが、BlazorのRazorコンポーネントでは@modelは使えそうにありません。
• 参考URL：ASP.NET Core MVC および Razor Pages でのモデルの検証 - 検証を再実行する
• MudBlazorを利用した状態でのコードが知りたいところではありますが、標準のEditFormならこうする、という情報でも頂けるとありがたいです。

開発環境

• Visual Studio 2022
• .NET 6.0 (※LTSなので使っているだけなので、7.0ならこう解決できる、というのがあれば教えて欲しいと思っています)
• Blazor Server
• 利用コンポーネント ライブラリ：MudBlazor

ソースコード

  public class Element
  {
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; } = "";

    [Required(ErrorMessage = "Melting point is required")]
    [CheckMeltByBoil(ErrorMessage = "Boiling point must be higher than melting point.")]
    public double MeltingPoint { get; set; } = 0.0;

    [Required(ErrorMessage = "Boiling point is required")]
    [CheckBoilByMelt(ErrorMessage = "Boiling point must be higher than melting point.")]
    public double BoilingPoint { get; set; } = 0.0;
  }
  //サンプル：new Element { Name = "Hydrogen", MeltingPoint = -259.14, BoilingPoint = -252.87 },

  [AttributeUsage(AttributeTargets.Property)]
  public class CheckMeltByBoilAttribute : ValidationAttribute
  {
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
      var model = validationContext.ObjectInstance as Element;
      if (model is null || value is null)
      {
        throw new NullReferenceException();
      }

      if ((double)value <= model.BoilingPoint)
      {
        return ValidationResult.Success;
      }
      else
      {
        return new ValidationResult(null);
      }
    }
  }

  [AttributeUsage(AttributeTargets.Property)]
  public class CheckBoilByMeltAttribute : ValidationAttribute
  {
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
      var model = validationContext.ObjectInstance as Element;
      if (model is null || value is null)
      {
        throw new NullReferenceException();
      }

      if (model.MeltingPoint <= (double)value)
      {
        return ValidationResult.Success;
      }
      else
      {
        return new ValidationResult(null);
      }
    }
  }

@using System.Globalization
@using MudDataGridSample.Data

<MudDialog>
    <TitleContent>
        <MudText Typo="Typo.h6">
            @(IsEdit ? "Edit" : "Create")
        </MudText>
    </TitleContent>
    <DialogContent>
        <MudForm @ref="form" @bind-IsValid="@success">
            <MudStack Spacing="1">
                <MudTextField Label="Name" HelperText="(HelperText)" @bind-Value="EditData.Name" For="@(() => EditData.Name)" />
                <MudNumericField Label="MeltingPoint" HelperText="(HelperText)" Format="N4" Culture="@CultureInfo.GetCultureInfo("en-US")" T="double" @bind-Value="EditData.MeltingPoint" For="@(() => EditData.MeltingPoint)" TextChanged="(string _val) => OnValueChangeHandler1(_val)" />
                <MudNumericField Label="BoilingPoint" HelperText="(HelperText)" Format="N4" Culture="@CultureInfo.GetCultureInfo("en-US")" T="double" @bind-Value="EditData.BoilingPoint" For="@(() => EditData.BoilingPoint)" TextChanged="(string _val) => OnValueChangeHandler2(_val)" />
            </MudStack>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Primary" Disabled="@(!success)" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>

@code {
    bool success = false;
    MudForm? form;

    [CascadingParameter] MudDialogInstance? MudDialog { get; set; }

    [Parameter] public bool IsEdit { get; set; } = false;
    [Parameter] public Element EditData { get; set; } = new();


    protected async Task OnValueChangeHandler1(string newValue)
    {
        double set_val = 0.0;
        if (!double.TryParse(newValue, out set_val))
        {
            return;
        }

        //入れ直してStateHasChangedしても効果無し
        EditData.MeltingPoint = set_val;
        double tmp = EditData.BoilingPoint;
        EditData.BoilingPoint = EditData.BoilingPoint + 1.0;
        await InvokeAsync(StateHasChanged); 
        EditData.BoilingPoint = tmp;
        await InvokeAsync(StateHasChanged);
    }

    protected async Task OnValueChangeHandler2(string newValue)
    {
        double set_val = 0.0;
        if (!double.TryParse(newValue, out set_val))
        {
            return;
        }

        //入れ直してStateHasChangedしても効果無し
        EditData.BoilingPoint = set_val;
        double tmp = EditData.MeltingPoint;
        EditData.MeltingPoint = EditData.MeltingPoint + 1.0;
        await InvokeAsync(StateHasChanged);
        EditData.MeltingPoint = tmp;
        await InvokeAsync(StateHasChanged);
    }

    void Submit() => MudDialog?.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog?.Cancel();
}

MudBlazorを使わずEditFormを使うなら以下のようになるでしょうか？
この場合はフォーカス移動だけで無く、値を入れ直さないとバリデーションチェックが走りませんでした。
操作例：
1.Melting pointに1を設定してフォーカスをBoiling pointに移動
→Melting pointのバリデーションメッセージ表示
2.Boiling pointに-255を設定してフォーカスをMelting pointに移動
→Boiling pointのバリデーションメッセージ表示
3.Melting pointに-999を設定してフォーカスをBoiling pointに移動
→Melting pointのバリデーションメッセージ表示が消えるがBoiling pointのバリデーションメッセージはそのまま。
4.Boiling pointの値を変えずにSaveボタンにフォーカスを移動
→変化無し
5.Boiling pointに-255を設定してSaveボタンにフォーカスを移動
→Boiling pointのバリデーションメッセージ表示が消える。

@using System.Globalization
@using MudDataGridSample.Data

<EditForm Model="@EditData" @ref="form" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    <div>
        <label>Name</label>
        <InputText @bind-Value="EditData.Name"></InputText>
        &nbsp;<ValidationMessage For="@(() => EditData.Name)" />
    </div>
    <br />
    <div>
        <label>Melting point</label>
        <InputNumber TValue="Double" @bind-Value="EditData.MeltingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.MeltingPoint)" />
    </div>
    <br />
    <div >
        <label >Boiling point</label>
        <InputNumber TValue="Double" @bind-Value="EditData.BoilingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.BoilingPoint)" />
    </div>
    <br />
    <div >
        <input type="submit" value="Save" />
    </div>
</EditForm>

@code {
    EditForm? form;

    public Element EditData { get; set; } = new Element { Name = "Hydrogen", MeltingPoint = -259.14, BoilingPoint = -252.87 };

    private async Task Submit()
    {

        await InvokeAsync(StateHasChanged);
    }
}

試したこと

• TextChangedイベントで値を入れ直してStateHasChangedを呼んでも効果はありませんでした。

Comments

[退会済みユーザー]

質問するならちゃんと開発環境を書きましょう。Blazor Server なのか WASM なのかさえも書いてない。

[sgty24]

失礼しました。追記しました。

[退会済みユーザー]

MudBlazor 抜きで、単に 2 つのユーザー入力の検証の話にできないですか？

[sgty24]

EditFormに関する記述を追加しました。
MudBlazorを利用した状態でのコードが知りたいところではありますが、標準のEditFormならこうする、という情報でも頂けるとありがたいです。

[退会済みユーザー]

プロパティにまたがるユーザー入力の検証がしたいのではなかろうかと想像してますが、ASP.NET MVC であればその目的には CustomValidation 属性というのがあります。Blazor Server にもそれが使えないかとちょっと思ったので上のコメントで「MudBlazor 抜きで、単に 2 つのユーザー入力の検証の話にできないですか？」と聞きました。

CustomValidation 属性
http://surferonwww.info/BlogEngine/post/2020/02/25/custom-validation-attribute.aspx

思い付きレベルの話で検証などは全くしてませんのでハズレだったらすみません。

[sgty24]

丁寧にありがとうございますm(_ _)m

現状のコードはCustomValidation属性ではなくValidationAttributeを継承した
　・CheckMeltByBoilAttribute
　・CheckBoilByMeltAttribute
を定義してMeltPointとBoilPointに属性として当てることで「2つの値にまたがるユーザー入力の検証」自体はできています。

参考：[C#]ValidationAttributeを継承して2つの項目の大小関係を検証する
https://qiita.com/nr_ck/items/b83f4d4373f132e0476e

ただ、
　・Melt point(融点)を入力してエラーになった際にBoil point(沸点)のエラーも表示させたい
　・Boil point(沸点)を入力してエラーになった際にMelt point(融点)のエラーも表示させたい
　・Melt point(融点)を入力したエラーが解消した際にBoil point(沸点)のエラーも解消させたい
　・Boil point(沸点)を入力したエラーが解消した際にMelt point(融点)のエラーも解消させたい
というUI上の挙動が実現できていないという状況です。

一応自己解決で書いた通り、MudBlazorであれば form?.Validate(); を呼ぶことで
バリデーションが再度実行されて上記仕様を満たすことができるのですが、
この場合Nameのバリデーションも実行されてしまうため、入力する人が
　「必要なのは分かってる。後から入れようと思ってたのにうるさいなぁ」
とUXを若干害することが懸念されたのでもうすこし何とかならないかなぁと思っている次第です。

[退会済みユーザー]

> ・Melt point(融点)を入力してエラーになった際にBoil point(沸点)のエラーも表示させたい
> ・Boil point(沸点)を入力してエラーになった際にMelt point(融点)のエラーも表示させたい
> ・Melt point(融点)を入力したエラーが解消した際にBoil point(沸点)のエラーも解消させたい
> ・Boil point(沸点)を入力したエラーが解消した際にMelt point(融点)のエラーも解消させたい

BoilingPoint にのみ検証属性を付与して、検証結果 NG (MeltingPoint > BoilingPoint) なら "MeltingPoint < BoilingPoint に設定してください" というようなエラーメッセージを BoilingPoint 入力の下に表示するというのではダメなのですか？　以下の記事のように。

ASP.NET MVC 用の CompareValidator
http://surferonwww.info/BlogEngine/post/2018/12/31/compare-validator-for-aspnet-mvc.aspx

そうすれば上の 4 つの件は悩まなくて済みそうな気がしますけど。

> この場合Nameのバリデーションも実行されてしまうため、

RequiredAttribute による検証はクライアント側とサーバー側の両方で行われませんか？　ASP.NET MVC はそうなります。Blazor Server は分かりませんが。

一方、CheckMeltByBoilAttribute, CheckBoilByMeltAttribute による検証はサーバー側でないと行われないはずです。（MudBlazor ではクライアント側でも検証される？　ちょっと考えにくいのですが）

そして、RequiredAttribute によるクライアント側の検証で検証結果 NG となった場合はサーバーへの送信はキャンセルされる、なので CheckMeltByBoilAttribute, CheckBoilByMeltAttribute による検証は動かないということになるのでは？

[退会済みユーザー]

自分でもちょっと試してみました。上のコメントの後半の方の、

> RequiredAttribute による検証はクライアント側とサーバー側の両方で行われませんか？　ASP.NET MVC はそうなります。Blazor Server は分かりませんが。

はまるっきりハズレでした。忘れてください。

前半の方の、

> BoilingPoint にのみ検証属性を付与して・・・

は原因不明で期待通り動かないケースがありました。もう少し考えてみますがなんとなくダメっぽい気がしてます。何か分かったら連絡します。

[退会済みユーザー]

質問者さん、回答したのでそれに対するフィードバック (役に立った/立たなかった。役に立たなかったならどこがダメだったかなど) を返してください。

[sgty24]

了解しました。しっかり見れていないので月曜ぐらいには回答させて頂きたいと思います。

[退会済みユーザー]

今日は水曜日ですけど？　回答してもらわなくていいので、いつまでもスレッドをオープンしておかないでクロースしてください。

[sgty24]

すみません、遅くなりました。
ひとまず自己解決とさせて頂きました。

Answer 1

【オマケ追記】

本題とは違う話ですが・・・

質問のコードのように InputNumber を使うと、

<InputNumber TValue="Double" @bind-Value="EditData.MeltingPoint" />

検証にいろいろ問題がでるようです。具体的には:

(1) テキストボックス入力を空白にした場合、モデルのプロパティに、

[Required(ErrorMessage = "Melting point は必須入力")]

を設定しても無視されて、以下のようなエラーメッセージとなってしまう。

(2) レンダリングされる html の input 要素の type 属性が "number" となり、入力の制約がブラウザ依存となる。Edge, Chrome, Opera では数字と + - . 以外の文字は受け付けなくなる。Firefox では何でも入力できてしまう。

(3) プロパティに RegularExpression 属性を追加してもやはり無視される。

ASP.NET MVC での検証にも同様な問題があります。上の問題を解決するには InputNumber に代えて InputText を使用し、Required 属性と RegularExpression 属性で検証を行うことです。

具体例を以下に載せておきます。

MyValidation.razor

質問のコードの InputNumber を InputText に変更。

@using BlazorServer.Models;

@page "/myvalidation"

<PageTitle>My Validation</PageTitle>

<h3>My Validation</h3>

<EditForm Model="@EditData" @ref="form" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    <ValidationSummary></ValidationSummary>
    <div>
        <label>Name</label>
        <InputText @bind-Value="EditData.Name"></InputText>
        &nbsp;<ValidationMessage For="@(() => EditData.Name)" />
    </div>
    <br />
    <div>
        <label>Melting point</label>
        <InputText @bind-Value="EditData.MeltingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.MeltingPoint)" />
    </div>
    <br />
    <div >
        <label >Boiling point</label>
        <InputText @bind-Value="EditData.BoilingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.BoilingPoint)" />
    </div>
    <br />
    <div >
        <input type="submit" value="Save" />
    </div>
</EditForm>

@code {
    EditForm? form;

    public CustomValidationModel3 EditData { get; set; } = new CustomValidationModel3();

    private async Task Submit()
    {
        await InvokeAsync(StateHasChanged);
    }
}

Model と Validator

using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Reflection;

namespace BlazorServer.Models
{
    [CustomValidation(typeof(CustomValidationModel3), "ValidateTemp")]
    public class CustomValidationModel3
    {
        [Required(ErrorMessage = "Name は必須入力")]
        public string Name { get; set; } = "";

        [Required(ErrorMessage = "Melting point は必須入力")]
        [RegularExpression(@"^[+-]?\d*\.?\d*$",
            ErrorMessage = "実数(例: +1.23) 形式。符号と小数点は省略可")]
        public string MeltingPoint { get; set; } = "";

        [Required(ErrorMessage = "Boiling point は必須入力")]
        [RegularExpression(@"^[+-]?\d*\.?\d*$",
            ErrorMessage = "実数(例: +1.23) 形式。符号と小数点は省略可")]
        public string BoilingPoint { get; set; } = "";

        public static ValidationResult ValidateTemp(CustomValidationModel3 model, ValidationContext context)
        {
            if (model == null)
            {
                throw new NullReferenceException();
            }

            if (double.Parse(model.MeltingPoint) >= double.Parse(model.BoilingPoint))
            {
                return new ValidationResult("MeltingPoint < BoilingPoint でなければなりません");
            }
            else
            {
                return ValidationResult.Success!;
            }
        }
    }
}

結果は以下の通り。

Comments

[sgty24]

回答ありがとうございます。
私はMudBlazorを使って検証を進めたんですが、検証をつけるクラス定義のプロパティをNullableにしたら動作するようになりました。
状況に応じて使い分けたいと思います。

Answer 2

質問のコメントに書いた、

・Melt point(融点)を入力してエラーになった際にBoil point(沸点)のエラーも表示させたい
・Boil point(沸点)を入力してエラーになった際にMelt point(融点)のエラーも表示させたい
・Melt point(融点)を入力したエラーが解消した際にBoil point(沸点)のエラーも解消させたい
・Boil point(沸点)を入力したエラーが解消した際にMelt point(融点)のエラーも解消させたい

BoilingPoint にのみ検証属性を付与して、検証結果 NG (MeltingPoint > BoilingPoint) なら "MeltingPoint < BoilingPoint に設定してください" というようなエラーメッセージを BoilingPoint 入力の下に表示するというのではダメなのですか？　以下の記事のように。

ASP.NET MVC 用の CompareValidator
http://surferonwww.info/BlogEngine/post/2018/12/31/compare-validator-for-aspnet-mvc.aspx

は、やってみましたが、検証されるもののエラーメッセージが表示されないケースがあるなどの問題があってダメでした。Blazor Server で検証がかかる条件・タイミングが不明で、それを調べて対処する気力が無いので断念。

その前に、CustomValidation 属性を使う提案をしましたが、

CustomValidation 属性
http://surferonwww.info/BlogEngine/post/2020/02/25/custom-validation-attribute.aspx

その中の「モデルレベル」で検証を行って、エラーメッセージは ValidationSummary に表示するという方法ですと、上の 4 つの件は解決できそうです。

ちなみに「プロパティレベル」では、検証されるもののエラーメッセージが表示されないケースがあるなどの同様な問題でダメでした。

以下に検証に使ったコードを書いておきます。

MyValidation.razor

質問のコードほぼそのまま。

@using BlazorServer.Models;

@page "/myvalidation"

<PageTitle>My Validation</PageTitle>

<h3>My Validation</h3>

<EditForm Model="@EditData" @ref="form" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    <ValidationSummary></ValidationSummary>
    <div>
        <label>Name</label>
        <InputText @bind-Value="EditData.Name"></InputText>
        &nbsp;<ValidationMessage For="@(() => EditData.Name)" />
    </div>
    <br />
    <div>
        <label>Melting point</label>
        <InputNumber TValue="Double" @bind-Value="EditData.MeltingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.MeltingPoint)" />
    </div>
    <br />
    <div >
        <label >Boiling point</label>
        <InputNumber TValue="Double" @bind-Value="EditData.BoilingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.BoilingPoint)" />
    </div>
    <br />
    <div >
        <input type="submit" value="Save" />
    </div>
</EditForm>

@code {
    EditForm? form;

    //public Element EditData { get; set; } = new Element();
    //public CustomValidationModel EditData { get; set; } = new CustomValidationModel();
    public CustomValidationModel2 EditData { get; set; } = new CustomValidationModel2();

    private async Task Submit()
    {
        await InvokeAsync(StateHasChanged);
    }
}

Model と Validator

一番最後の CustomValidationModel2 を使います。その上はやってみたダメだったものですが、参考までに載せておきます。

using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Reflection;

namespace BlazorServer.Models
{
    public class Element
    {
        [Required(ErrorMessage = "Name は必須入力")]
        public string Name { get; set; } = "";

        [Required(ErrorMessage = "Melting point は必須入力")]
        //[CheckMeltByBoil(ErrorMessage = "Boiling point must be higher than melting point.")]
        public double MeltingPoint { get; set; } = 0.0;

        [Required(ErrorMessage = "Boiling point は必須入力")]
        //[CheckBoilByMelt(ErrorMessage = "Boiling point must be higher than melting point.")]
        [TempHigherThan("MeltingPoint", "{0} は MeltingPoint より高い温度に設定してください")]
        public double BoilingPoint { get; set; } = 0.0;
    }

    [AttributeUsage(AttributeTargets.Property)]
    public class TempHigherThanAttribute : ValidationAttribute
    {
        private string _lowerTempPropertyName;

        // コンストラクタ
        public TempHigherThanAttribute(string lowerTempPropertyName, string errorMsg)
        {
            this._lowerTempPropertyName = lowerTempPropertyName;
            this.ErrorMessage = errorMsg;
        }

        public override string FormatErrorMessage(string name)
        {
            return string.Format(CultureInfo.CurrentCulture, ErrorMessageString, name);
        }

        protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
        {
            if (value == null)
            {
                return new ValidationResult("プロパティの値が null");
            }

            PropertyInfo? propertyInfo = validationContext.ObjectType.GetProperty(this._lowerTempPropertyName);
            if (propertyInfo == null)
            {
                return new ValidationResult("比較対象の PropertyInfo が null");
            }

            object? propertyValue = propertyInfo.GetValue(validationContext.ObjectInstance, null);
            if (propertyValue == null)
            {
                return new ValidationResult("比較対象の PropertyValue が null");
            }

            if ((double)value! > (double)propertyValue)
            {
                return ValidationResult.Success;
            }
            else
            {
                // ValidationResult の引数に null または "" を設定する
                // と FormatErrorMessage メソッドの戻り値が設定される
                return new ValidationResult(null);
            }
        }
    }

    public class CustomValidationModel
    {
        [Required(ErrorMessage = "Name は必須入力")]
        public string Name { get; set; } = "";

        [Required(ErrorMessage = "Melting point は必須入力")]
        //[CustomValidation(typeof(CustomValidationModel), "ValidateTemp")]
        public double MeltingPoint { get; set; } = 0.0;

        [Required(ErrorMessage = "Boiling point は必須入力")]
        [CustomValidation(typeof(CustomValidationModel), "ValidateTemp")]
        public double BoilingPoint { get; set; } = 0.0;

        public static ValidationResult ValidateTemp(double higherTemp, ValidationContext context)
        {
            var model = context.ObjectInstance as CustomValidationModel;
            if (model == null)
            {
                throw new NullReferenceException();
            }

            if (model.MeltingPoint >= model.BoilingPoint)
            {
                return new ValidationResult("MeltingPoint < BoilingPoint でなければなりません");
            }
            else
            {
                return ValidationResult.Success!;
            }
        }
    }


    [CustomValidation(typeof(CustomValidationModel2), "ValidateTemp")]
    public class CustomValidationModel2
    {
        [Required(ErrorMessage = "Name は必須入力")]
        public string Name { get; set; } = "";

        [Required(ErrorMessage = "Melting point は必須入力")]
        public double MeltingPoint { get; set; } = 0.0;

        [Required(ErrorMessage = "Boiling point は必須入力")]
        public double BoilingPoint { get; set; } = 0.0;

        public static ValidationResult ValidateTemp(CustomValidationModel2 model, ValidationContext context)
        {            
            if (model == null)
            {
                throw new NullReferenceException();
            }

            if (model.MeltingPoint >= model.BoilingPoint)
            {
                return new ValidationResult("MeltingPoint < BoilingPoint でなければなりません");
            }
            else
            {
                return ValidationResult.Success!;
            }
        }
    }
}

結果は以下の通りです。上の CustomValidationModel2 クラスの ValidateTemp メソッドは［Save］ボタンがクリックされたときのみ働きます。

Comments

[sgty24]

コメントが遅くなってすみません。
実現したかったUIは入力に併せて動的にバリデーションがかかるものなので、欲しかったものとは異なるのですがこれはこれで参考になりました。ありがとうございます。

Answer 3

少し自己解決

TextChangeイベントで値を入れてform?.Validate();を呼ぶようにしたら一応できました。
Nameのバリデーションまで動いてしまうのが玉に瑕ですが(´･ω･`)

@using System.Globalization
@using MudDataGridSample.Data

<MudDialog>
    <TitleContent>
        <MudText Typo="Typo.h6">
            @(IsEdit ? "Edit" : "Create")
        </MudText>
    </TitleContent>
    <DialogContent>
        <MudForm @ref="form" @bind-IsValid="@success">
            <MudStack Spacing="1">
                <MudTextField Label="Name" HelperText="(HelperText)" @bind-Value="EditData.Name" For="@(() => EditData.Name)" />
                <MudNumericField Label="MeltingPoint"
                                 HelperText="(HelperText)"
                                 Format="N4"
                                 Culture="@CultureInfo.GetCultureInfo("en-US")"
                                 T="double"
                                 @bind-Value="EditData.MeltingPoint"
                                 For="@(() => EditData.MeltingPoint)"
                                 TextChanged="(string _val) => OnValueChangeHandler1(_val)" />
                <MudNumericField Label="BoilingPoint"
                                 HelperText="(HelperText)"
                                 Format="N4"
                                 Culture="@CultureInfo.GetCultureInfo("en-US")"
                                 T="double"
                                 @bind-Value="EditData.BoilingPoint"
                                 For="@(() => EditData.BoilingPoint)"
                                 TextChanged="(string _val) => OnValueChangeHandler2(_val)" />
            </MudStack>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Primary" Disabled="@(!success)" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>

@code {
    bool success = false;
    MudForm? form;

    [CascadingParameter] MudDialogInstance? MudDialog { get; set; }

    [Parameter] public bool IsEdit { get; set; } = false;
    [Parameter] public Element EditData { get; set; } = new();

    protected async Task OnValueChangeHandler1(string newValue)
    {
        await Task.Delay(0);
        double set_val = 0.0;
        if (!double.TryParse(newValue, out set_val))
        {
            return;
        }

        EditData.MeltingPoint = set_val;
        form?.Validate();
    }

    protected async Task OnValueChangeHandler2(string newValue)
    {
        await Task.Delay(0);
        double set_val = 0.0;
        if (!double.TryParse(newValue, out set_val))
        {
            return;
        }
        EditData.BoilingPoint = set_val;
        form?.Validate();
    }

    void Submit() => MudDialog?.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog?.Cancel();
}