English 中文(简体)
Blazor custom validation in child component
原标题:

I have this component that goes into a form like

    <NumberWithNAAndAmberRanges2 @bind-BindNumber="LocVM.ChartDayStartMinute" 
    NaName="Not Applicable"  NaAllowed="true" 
    AmberRange_Min="10" AmberRange_Max="45" 
    RedRange_Max="59" RedRange_Min="0" />

The display is pretty simple it has a bound number input which returns -1 if the n/a box is checked Then a red (absolute) range that inputs must be inside And an amber (or normal) range that is expected but if the input is outside of amber but inside red (eg 50 in example above) a check box is displayed to confirm the unusual value.

I have it working and displaying the confirm box for values that need confirming but I need to write a validator that stops the user from proceeding until either within amber or having ticked the box.

So I m trying to make a validator that is part of the component rather than the validation on the parent model but feeds back to the parent form stopping valid submit.

<table>
    <tr>
        <td>
          <InputNumber id="tbNumber" class="form-control"  Value="@DisplayNumber" ValueExpression="() => DisplayNumber"   @oninput="OnValueChanged"/>
        </td>
@if (NaAllowed){ 
        <td>&nbsp;</td>
        <td>
                        <InputCheckbox  id="cb" Value="@vNA" ValueExpression="() => vNA"  @oninput="OnCheckedChanged"  />
         </td>
        <td>&nbsp;</td>
        <td>@NaName</td>
 }
    </tr>
</table> 


@if (AmberRange_Outside){    
 <div>
     <strong>
         @DisplayNumber is out side of expected range of @AmberRange_Min to @AmberRange_Max please confirm below
     </strong>
  </div>
 <div>
            <InputCheckbox  id="cbOutsideAmber" Value="@AmberRange_ConfrimChk" ValueExpression="() => AmberRange_ConfrimChk"    /> Confrim unusual value
 </div>

}else{
 <div>
     Within amber
 </div>
}
@if (RedRange_Outside){    
 <div>
     <strong>
         @DisplayNumber is out side of acceptible range of @RedRange_Min to @RedRange_Max 
     </strong>
  </div> 
}else{
 <div>
     Within red
 </div>
}

@code {
    private Boolean initalSet  = false;
    private Boolean vNA;
    private Boolean RedRange_Outside = false;
    private Boolean AmberRange_Outside = false;
    private Boolean AmberRange_ConfrimChk = false;
    private int? _BindNumber;
    
    [Parameter]
    public int? RedRange_Max { get; set; }
    [Parameter]
    public int? RedRange_Min { get; set; }
    [Parameter]
    public int? AmberRange_Max { get; set; }
    [Parameter]
    public int? AmberRange_Min { get; set; }
    [Parameter]
    public String NaName { get; set; }
    [Parameter]
    public Boolean Required { get; set; }
    [Parameter]
    public Boolean NaAllowed { get; set; }
    [Parameter]
    public EventCallback<int?> BindNumberChanged { get; set; }
    [Parameter]
    public int? BindNumber {
        get { return _BindNumber; }
        set
        {
            if (_BindNumber != value || !initalSet )
            {        
                _BindNumber = value;
                if (_BindNumber == null)
                {
                    vNA = false;
                    DisplayNumber = null;
                }
                else if (_BindNumber == -1)
                {
                    vNA = true;
                    DisplayNumber = null;
                }
                else
                {
                    vNA = false;
                    DisplayNumber = _BindNumber;
                }
                if (initalSet)
                {
                    AmberRange_ConfrimChk = false;
                    BindNumberChanged.InvokeAsync(_BindNumber);  
                }
                else { initalSet = true;
                    AmberRange_ConfrimChk = true;}
            }
            
            AmberRange_Outside = AmberOutOfRange(_BindNumber);
            RedRange_Outside = RedOutOfRange(_BindNumber);

        }
    }
    


     protected Boolean RedOutOfRange(int? newNumber)
    {
        if (newNumber != null && (newNumber != -1 || !NaAllowed))
        {
            if ( RedRange_Min != null )
            {
                if (RedRange_Min > newNumber )
                {return true;}
            }
            if ( RedRange_Max != null )
            {
                if (RedRange_Max < newNumber )
                {return true;}
            }
        }
        return false;
    }  
    protected Boolean AmberOutOfRange(int? newNumber)
    {
        if (newNumber != null && newNumber != -1 && !RedOutOfRange(newNumber))
        {
            if (  AmberRange_Min != null )
            {
                if (AmberRange_Min > newNumber )
                {return true;}
            }
            if ( AmberRange_Max != null )
            {
                if (AmberRange_Max < newNumber )
                {return true;}
            }
        }
        return false;
    }

    public int? DisplayNumber { get; set; }

    protected async Task OnValueChanged(ChangeEventArgs e)
    {
        if (e.Value != null)
        {
            string stVal = e.Value.ToString();
            int newNumber;
            if (int.TryParse(stVal ,out newNumber))
            {                
                BindNumber = newNumber;
                vNA = false;
            }else{             
                BindNumber = null;
            }
            
        }
    }
    protected async Task OnCheckedChanged(ChangeEventArgs e)
    {
        if (e.Value != null)
        {
            string stVal = e.Value.ToString();
            Boolean newChecked;
            if (Boolean.TryParse(stVal ,out newChecked))
            {
                if (newChecked)
                {
                    BindNumber = -1;
                }
            }
        }
    }


}
问题回答

暂无回答




相关问题
Bind Button.IsEnabled to custom validation with XAML?

I am sorry I didn t know how to title my question any better, you name it if you got a good 1. I have an entity Contact. this person has navigation properties: Address, Phones (A collection of Phone)....

WPF - MVVM - NHibernate Validation

Im facing a bit of an issue when trying to validate a decimal property on domain object which is bound to a textbox on the view through the viewmodel. I am using NHibernate to decorate my property on ...

Wpf Combobox Limit to List

We are using Wpf Combobox to allow the user to do the following things: 1) select items by typing in the first few characters 2) auto complete the entry by filtering the list 3) suggesting the first ...

Rails 101 | validates_currency?

I ve searched high and low, but I could not find a solution, to what I think seems like a very common task. In a form I want to have a text input that accepts currency strings (i.e. $1,000,000 or ...

CodeIgniter form verification and class

I m using the form validation library and have something like this in the view <p> <label for="NAME">Name <span class="required">*</span></label> <?...

热门标签