// Für FocusEventArgs und ChangeEventArgs

P11Textarea Component

The P11Textarea component provides a multi-line text input field, wrapping the native HTML <textarea> element. It integrates with Bootstrap's form styling and offers essential features like labels, descriptions, placeholders, character limits, and seamless integration with Blazor's validation system.

Note: This component handles standard textarea attributes like Rows, Placeholder, and MaxLength. It's recommended to use the ValidationFor parameter for proper client-side and server-side validation integration within Blazor forms.

P11Textarea Component Examples

These examples demonstrate various configurations and functionalities of the P11Textarea component, showcasing its flexibility for different use cases and event handling.

Here you can test the various configurations of the P11Textarea component.

1. Basic Textarea

Simple text area with default settings (label, description, 3 rows, no validation).

Your Message

Enter your message here.

Value:

2. Textarea with Explicit Change Logging

This example explicitly logs value changes using the OnChange event. The log below will update when you finish typing and leave the textarea.

Log Changes

P11Textarea Configuration Error:

P11Textarea Configuration Warning: An EditContext is available, but 'ValidationFor' parameter is null. Validation messages will not be displayed for this component unless 'ValidationFor' is provided. Consider adding 'ValidationFor' or setting 'ShowDevelopmentErrors = false' for this instance if validation is not intended.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value:

3. Textarea with Focus and Blur Events

This example demonstrates logging when the textarea gains or loses focus.

Focus/Blur Events

P11Textarea Configuration Error:

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value:

4. Textarea with Placeholder and MaxLength

Text area with placeholder and maximum character length.

Short Remark

P11Textarea Configuration Error:

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value:

5. Disabled Textarea

A disabled text area.

Disabled Field

This field is not editable.

P11Textarea Configuration Error:

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value: Disabled text here

6. Textarea with Custom Rows

Text area with a custom number of rows (e.g., 6 rows).

Long Description

This field is larger.

P11Textarea Configuration Error:

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value:

7. Textarea with Validation (Required)

Text area marked as a required field. Try leaving it empty and submitting the form.

Required Field

Value:

8. Textarea with Validation (MinLength and MaxLength)

Text area with minimum and maximum length validation.

Comment (min. 10, max. 100 characters)

Value:

9. Textarea with Nullable String Value

Text area that accepts a null value (string?). Expected: Initially empty, toggling works.

Optional Note

Can be left empty.

P11Textarea Configuration Error:

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value: ?? "null"

10. Textarea with Additional Attributes

Text area with a custom data-info attribute. Check it in the browser inspector.

Field with Extra Attribute

P11Textarea Configuration Error:

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value:

Event Log

This log displays events triggered by the textarea components, such as focus, blur, and explicit value changes.

Implementation


<h4 class="mb-3">Event Log</h4>
<p>This log displays events triggered by the textarea components, such as focus, blur, and explicit value changes.</p>
<div class="border p-2" style="height: 150px; overflow-y: scroll; background-color: #f8f9fa;">
    @foreach (var logEntry in eventLogTextarea)
    {
        <div>@logEntry</div>
    }
</div>


private List<string> eventLogTextarea = new List<string>();

private void LogEventTextarea(string message)
{
    eventLogTextarea.Add($"{DateTime.Now:HH:mm:ss} - {message}");
    if (eventLogTextarea.Count > 10)
    {
        eventLogTextarea.RemoveAt(0);
    }
    StateHasChanged();
}

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text for the textarea.
`Description`	`string?`	`null`	Gets or sets a descriptive text that will appear below the textarea, typically providing additional guidance or context.
`Value`	`TValue?`	`null`	The value of the textarea. This parameter is used for two-way binding with `@bind-Value`. Expected types are string or string?.
`ValidationFor`	`Expression<Func<TValue>>?`	`null`	Gets or sets an expression that identifies the field for validation messages. Example: `() => MyModel.MyProperty`
`CssClass`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the root div element of the component.
`Disabled`	`bool`	`false`	Gets or sets a value indicating whether the textarea should be displayed in a disabled state.
`Rows`	`int`	`3`	Gets or sets the number of visible text lines in the textarea.
`Placeholder`	`string?`	`null`	Gets or sets the placeholder text for the textarea.
`MaxLength`	`int?`	`null`	Gets or sets the maximum number of characters allowed in the textarea.
`ShowDevelopmentErrors`	`bool`	`true`	If `true`, configuration error messages will be displayed on the UI in development mode. Set to `false` to suppress them globally or per instance.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Gets or sets a collection of additional attributes that will be applied to the textarea element. This allows passing standard HTML attributes directly to the underlying textarea tag. Example: `@attributes="AdditionalAttributes"`
Events
`ValueChanged`	`EventCallback<TValue>`	-	An `EventCallback` that is invoked when the `Value` changes. Used for two-way binding.
`OnChange`	`EventCallback<ChangeEventArgs>`	-	An `EventCallback` that is invoked when the textarea's value is committed (e.g., on blur or Enter key).
`OnFocus`	`EventCallback<FocusEventArgs>`	-	An `EventCallback` that is invoked when the textarea gains focus.
`OnBlur`	`EventCallback<FocusEventArgs>`	-	An `EventCallback` that is invoked when the textarea loses focus.