TourIAm/TIAMSharedUI/Pages/Components/Step2.razor

72 lines
2.2 KiB
Plaintext

@using TIAMWebApp.Shared.Application.Models.PageModels;
@using TIAMWebApp.Shared.Application.Utility;
<h3>Step 2: Phone Number</h3>
<EditForm Model="@regModel" OnValidSubmit="GoToNextStep">
<DataAnnotationsValidator />
<div class="form-field d-flex align-items-center">
<DxMaskedInput @bind-Value="regModel.PhoneNumber"
Id="PhoneNumber"
Mask="\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})"
MaskMode="@MaskMode.RegEx">
<DxRegExMaskProperties Placeholder="Placeholder"
PlaceholdersVisible=true/>
</DxMaskedInput>
</div>
<ValidationMessage For="@(() => regModel.PhoneNumber)" />
<a class="btn btn-primary mt-3" @onclick="GoToPreviousStep">Previous</a>
<button class="btn btn-primary mt-3" type="submit">
<span class="@spinnerClass"></span>
Next
</button>
</EditForm>
@code {
[Parameter]
public RegistrationModel regModel { get; set; }
[Parameter]
public EventCallback<RegistrationModel> onNext { get; set; }
[Parameter]
public EventCallback<RegistrationModel> onPrev { get; set; }
[Parameter]
public EventCallback<RegistrationModel> RegModelChanged { get; set; }
//public string PhoneNumberMask { get; set; } = "\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})";
public string PhoneNumberMask { get; set; } = TIAMRegularExpressions.PhoneNumberMask;
char Placeholder = '_';
private string spinnerClass = "";
private async Task GoToNextStep()
{
spinnerClass = "spinner-border spinner-border-sm";
await Task.Delay(500);
spinnerClass = "";
await RegModelChanged.InvokeAsync(regModel);
await onNext.InvokeAsync();
}
private async Task GoToPreviousStep()
{
await onPrev.InvokeAsync();
}
}