Question

我有一个带有MatBlazor扩展面板的EditForm。我试图设置单个面板的边框颜色（如果其中任何表单字段无效）。我正在努力实现以下目标。

<MatExpansionPanel Class="@(<bool>ChildElementHasValidationMessage() ? "invalid-red-border": "")">.....</MatExpansionPanel>

我可以使用简单的等效CSS解决方案来找到父元素。请指教。

Answer 1

只需使用Style代替Class来覆盖CSS：

<MatExpansionPanel Style="@(your expression);"

我回答了有关MatExpansionPanel的一个相关问题：Mat Blazor mat-expansion-panel remove elevation/border

已编辑

我编写了自己的组件以将EditContext发送给更改。我将其粘贴在下面。它是这样工作的：

<h1>@ShowDemo</h1>

<EditForm Model="@model" OnValidSubmit="@SaveItem">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <MyValidationSneak UpdateDelegate="@( (ctx)=>UpdateUI(ctx) )" /> 
    <InputText id="ItemName" @bind-Value="@model.ItemName" />
    <ValidationMessage For="@(() => model.ItemName)" />
    <button type="submit">Submit</button>
</EditForm>

@code {

    string ShowDemo = "res de res";

    protected void UpdateUI(EditContext ctx)
    {
        var _fieldIdentifier = FieldIdentifier.Create( () => model.ItemName );
        ShowDemo = string.Join(", ", ctx.GetValidationMessages(_fieldIdentifier) );
    }

    ItemModel model = new ItemModel();

    private void SaveItem() { }

    public class ItemModel
    {
        [Required]
        public string ItemName{ get; set; }
    }
}

在BlazorFiddle上查看它的运行情况：

MyValidationSneak：

public class MyValidationSneak: ComponentBase, IDisposable
{
    [CascadingParameter] EditContext CurrentEditContext { get; set; }
    [Parameter] public Action<EditContext> UpdateDelegate { get; set; }

    private readonly EventHandler<ValidationStateChangedEventArgs> _validationStateChangedHandler;
    public MyValidationSneak()
    {
        _validationStateChangedHandler = (sender, eventArgs) => GoUpdate();
    }

    private void GoUpdate() => UpdateDelegate(CurrentEditContext);

    private EditContext _previousEditContext;
    protected override void OnParametersSet()
    {
        if (CurrentEditContext == null)
        {
            throw new InvalidOperationException($"{nameof(ValidationSummary)} requires a cascading parameter " +
                $"of type {nameof(EditContext)}. For example, you can use {nameof(ValidationSummary)} inside " +
                $"an {nameof(EditForm)}.");
        }

        if (CurrentEditContext != _previousEditContext)
        {
            DetachValidationStateChangedListener();
            CurrentEditContext.OnValidationStateChanged += _validationStateChangedHandler;
            GoUpdate();
            _previousEditContext = CurrentEditContext;
        }
    }

    protected virtual void Dispose(bool disposing) {}

    void IDisposable.Dispose()
    {
        DetachValidationStateChangedListener();
        this.Dispose(disposing: true);
    }
    private void DetachValidationStateChangedListener()
    {
        if (_previousEditContext != null)
        {
            _previousEditContext.OnValidationStateChanged -= _validationStateChangedHandler;
            GoUpdate();
       }
    }                
}

Get code at github

Blazor服务器端，根据子类名称设置父类名称

1 个答案: