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> </td>
<td>
<InputCheckbox id="cb" Value="@vNA" ValueExpression="() => vNA" @oninput="OnCheckedChanged" />
</td>
<td> </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;
}
}
}
}
}