Blazor Form Two Way Binding with Expando Object or Dictionary<string, dynamic> #41554
Description
Is there an existing issue for this?
- I have searched the existing issues
Is your feature request related to a problem? Please describe the problem.
I am trying to accomplish Functionality similar to Angular FormBuilder, where we dynamically add Controls and Validations.
In Blazor, we have to use POCO/Model to bind with Controls in order to achieve TwoWay binding which is fine, but when I have to create a dynamic form I don't have a class because in a DynamicForm it may have N numbers of fields.
After exploring a bit, I decided to use ExpandoObject with dynamically added Properties to bind with Blazor Form controls with OnInitialized Method as below
dynamic FormModel = new ExpandoObject();
protected override void OnInitialized()
{
FormModel.FirstName = null;
FormModel.LastName = null;
FormModel.Age= 21;
FormModel.Country= 1; //DropDownValue
FormModel.Email = null;
FormModel.Subscribed = null; //CheckBox
}
and in HTML using Textbox
<InputText @bind-Value=FormModel.FirstName />
<InputText @bind-Value=FormModel.LastName />
<InputNumber @bind-Value="FormModel.Age" />
But it doesn't work.
Describe the solution you'd like
There must be a FormBuilder like class giving options to add a new Form Component with Control Type, ValidationsArray.
userform = new [FormGroup]({
firstName: new [FormControl]('TextBox', Validation: [Required: true, MinLen: 3]),
lastName: new FormControl,
});
Additional context
Angular Reactive Form enables us to Dynamically Create Forms with Dynamic Controls and Validations.
https://angular.io/guide/dynamic-form
https://angular.io/guide/reactive-forms