dynamic form fields in wizard-form

[Gerardo]

Hi, I'm using a wizard with form component integration, using taghelpers. 

The second page will have a dynamic list of phones:

class Phone {
    [Required]
    public string number {get;set;}
    [Required]
    public string country {get;set;}
}

I can't find a way to accomplish the following:

• How do I declare a loop to display all the phones?

• How can I dynamically add more phones to the list, given that most non-form-related tags are invalid inside the form?

• I have a custom validator to check the list length, but I don't see how to wire it up, since I haven't figured out how to render the list.

I'd appreciate it if you could point me in the right direction.

Regards,

[Eyup]

Hi Gerardo,

 

Thank you for reaching out.

Generally, loops can be used like this:

@{
    List<string> phones=new List<string>(){"Home Phone", "Office Phone", "Fax"};
    int i = 0;
}

Form syntax:

                            @foreach (var item in phones)
                            {
                               i++;
                               <form-item col-span="1" field="Phone">
                                  <item-label text="Phone: @i" />
                               </form-item>
                            }

But I am afraid this won't work in this scenario because the field property cannot be set dynamically. It needs to be different for each form-item, it cannot be Phone for all of them.

For validation you can check this live example:
https://demos.telerik.com/aspnet-core/wizard/form

And integrate any desired custom rule similar to this:

<script>
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                username: function (input) {
                    if (input.is("[name='Username']")) {
                        input.attr("data-username-msg", "Username is required");

                        if (!input.val()) {
                            return false;
                        }
                    }

                    return true;
                },

For implementing multiple Phone options with the ability of the User to add more phones easily, you can use a custom Editor for the Phones field.

For example, the Form provides built-in combobox options:

            <form-item field="ComboBox">
                <item-label text="ComboBox:" optional="true" />
                <combobox-editor placeholder="Select..." datatextfield="ProductName" datavaluefield="ProductID" filter="FilterType.Contains" min-length="3"
                                    style="width: 100%" height="520">
                    <datasource server-filtering="true">
                        <transport>
                            <read url="@Url.Action("Items_GetProducts", "Form")" data="filterProducts"/>
                        </transport>
                    </datasource>
                </combobox-editor>
            </form-item>

Currently, it does not have MultiSelect or ListBox options, but it is possible to implement them using the EditorHandler approach:

                        <form-item field="Password" hint="Hint: enter alphanumeric characters only." editor-handler="setPasswordEditor">
                            <item-label text="Password:">
                        </form-item>

Create MultiSelect or ListBox for dynamic Phone addition similar to this custom password input:

    function setPasswordEditor(container, options) {
        $('<input type="password" id="Password" name="' + options.field + '" title="Password" required="required" autocomplete="off" aria-labelledby="Password-form-label" data-bind="value: Password" aria-describedby="Password-form-hint"/>')
            .appendTo(container)
            .kendoTextBox();
    }

https://demos.telerik.com/aspnet-core/form

I hope this information was helpful.

 

Regards,
Eyup
Progress Telerik