FormGroup
in namespace DotVVM.Framework.Controls.Bootstrap4
Represents a group in the Form control.
Usage & Scenarios
The FormGroup is used inside the Form control and renders a form field with a label.
https://getbootstrap.com/docs/4.3/components/forms/#form-groups
Sample 1: FormGroup Usage
Place any content inside the FormGroup control.
The TextBox and ComboBox controls will get the class="form-control" automatically
so they'll get the default Bootstrap look.
If you use the CheckBox and RadioButton controls, make sure you use <bs:CheckBox> and <bs:RadioButton>
instead of <dot:CheckBox> and <dot:RadioButton> controls.
<bs:Form Type="Default">
<bs:FormGroup LabelText="TextBox">
<bs:TextBox Text="{value: Text}" />
</bs:FormGroup>
<bs:FormGroup LabelText="ComboBox">
<bs:ComboBox DataSource="{value: Items}" SelectedValue="{value: Item}" />
</bs:FormGroup>
<bs:FormGroup LabelText="CheckBox">
<bs:CheckBox Checked="{value: IsChecked}" IsInline="true" />
</bs:FormGroup>
<bs:FormGroup LabelText="RadioButton">
<bs:RadioButton Checked="{value: Radio}" CheckedValue="{value: true}" IsInline="true" Text="yes" />
<bs:RadioButton Checked="{value: Radio}" CheckedValue="{value: false}" IsInline="true" Text="no" />
</bs:FormGroup>
</bs:Form>
Text: {{value: Text}} <br />
ComboBox: {{value: Item}} <br />
CheckBox: {{value: IsChecked}} <br />
RadioButton: {{value: Radio}} <br />using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.FormGroup.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public string Text { get; set; }
public string[] Items => new[] { "one", "two", "three" };
public string Item { get; set; } = "one";
public bool IsChecked { get; set; }
public bool Radio { get; set; }
}
}Sample 2: FormGroup LabelTemplate
If you need custom content in the label, just use the LabelTemplate property instead of LabelText.
<bs:Form>
<bs:FormGroup>
<LabelTemplate>
Your favorite colors
<bs:Button Text="Send" Click="{command: DoSomething()}"></bs:Button>
</LabelTemplate>
<FormContent>
<bs:CheckBox Text="Red" Checked="{value: Red}" IsInline="true" />
<bs:CheckBox Text="Blue" Checked="{value: Blue}" IsInline="true" />
</FormContent>
</bs:FormGroup>
<span>{{value: Text}}</span>
</bs:Form>public class ViewModel : DotvvmViewModelBase
{
public bool Red { get; set; } = false;
public bool Blue { get; set; } = true;
public string Text { get; set; }
public void DoSomething()
{
if (Red && Blue)
{
Text = "You selected two colors";
}
else
{
Text = "You selected only one color";
}
}
}
Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
ContentTemplate | List<DotvvmControl> | Gets or sets the content of the form group. |
inner element
static value
bindable
default
|
null |
|
ControlID | String | Gets or sets the ID of the main control inside the FormGroup to be associated with the label. |
attribute
static value
|
null |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True |
|
InnerText | String | Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children. |
attribute
static value
bindable
|
null |
|
LabelSize | Int32? | Gets or sets the size of size the label area for all screen sizes. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeLG | Int32? | Gets or sets the size of the label area large screen. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeMD | Int32? | Gets or sets the size of the label area for medium screen. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeSM | Int32? | Gets or sets the size of the label area small screen. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelSizeXL | Int32? | Gets or sets the size of the label area for extra large screen. This applies only to the Horizontal forms. |
attribute
static value
|
null |
|
LabelTemplate | ITemplate | Gets or sets the template of the label area. This property cannot be combined with the LabelText property. |
inner element
static value
|
null |
|
LabelText | String | Gets or sets the label text. This property cannot be combined with the LabelTemplate property. |
attribute
static value
bindable
|
null |
|
Size | Size | Gets or sets the size of controls in the form group. |
attribute
static value
bindable
|
Default |
|
Type | FormGroupType | Gets or sets the type of the form. |
attribute
static value
|
Default |
|
UsedControlIDList | HashSet<String> |
attribute
static value
bindable
|
null | |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
bindable
|
True |