FormPage.razor

@namespace Skclusive.Reactive.App.View
@inherits MaterialComponentBase

@using Skclusive.Core.Collection

@page "/reactive-form"

<div class="position: relative;padding: 32px;">
    <FormView
        Form="@Form"
        Reset
        OnCancel="@(() => {})" />
</div>

@code
{
    protected IFormObservable Form { set; get; } = Mobx.Form.AppTypes.FormType.Create(new Form
    {
        Sections = new Section[]
        {
            new Section
            {
                Title = "Basic",
                Selected = true,
                Outline = new Outline
                (
                    "name/firstName",
                    new Outline
                    (
                        "name/middleName",
                        "name/lastName"
                    ),
                    "name/age",
                    "birthdate",
                    new Outline
                    (
                        "size",
                        "color"
                    )
                )
            },
            new Section
            {
                Title = "Others",
                Outline =  new Outline
                (
                    "website",
                    "ipv4",
                    "agree"
                )
            },
        },

        Schema = new Mobx.JsonSchema.Object
        {
            Title = "User",
            Properties = new Map<string, IAny>
            {
                ["name"] = new Mobx.JsonSchema.Object
                {
                    Title = "Name",
                    Properties = new Map<string, IAny>
                    {
                        ["firstName"] = new Mobx.JsonSchema.String
                        {
                            Title = "First Name",
                            Value = "naguvan",
                            MinLength = 5
                        },
                        ["lastName"] = new Mobx.JsonSchema.String
                        {
                            Title = "Last Name",
                            Value = "",
                            MinLength = 2
                        },
                        ["middleName"] = new Mobx.JsonSchema.String
                        {
                            Title = "Middle Name",
                            Value = "",
                            MinLength = 0
                        },
                        ["age"] = new Mobx.JsonSchema.Number
                        {
                            Title = "Age",
                            Minimum = 2,
                            Maximum = 30,
                            MultipleOf = 2,
                        },
                    },
                },
                ["birthdate"] = new Mobx.JsonSchema.String
                {
                    Title = "Birth Date",
                    Format = Format.Date,
                    Value = ""
                },
                ["ipv4"] = new Mobx.JsonSchema.String
                {
                    Title = "IPv4",
                    Format = Format.IPv4,
                    Value = ""
                },
                ["color"] = new Mobx.JsonSchema.String
                {
                    Title = "Color",
                    Format = Format.Color,
                    Value = ""
                },
                ["size"] = new Mobx.JsonSchema.Number
                {
                    Title = "Size",
                    Minimum = 3,
                    Maximum = 21,
                    MultipleOf = 3
                },
                ["agree"] = new Mobx.JsonSchema.Boolean
                {
                    Const = true,
                    Value = false,
                    Title = "I agree with your terms",
                },
                ["website"] = new Mobx.JsonSchema.String
                {
                    Title = "website",
                    Format = Format.URI,
                    Value = ""
                }
            }
        }
    });
}