TourIAm/TIAMSharedUI/Pages/Components/Step2.razor

39 lines
1.2 KiB
Plaintext

<div>
<h3>Step 2: Phone Number</h3>
<div class="form-field d-flex align-items-center">
<DxMaskedInput @bind-Value="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" />
</DxMaskedInput>
<!--input @bind="Email" type="email" name="email" id="email" placeholder="Email"-->
</div>
<!--input @bind="PhoneNumber" placeholder="Enter your phone number" /-->
<a class="btn btn-primary mt-3" @onclick="GoToNextStep">Next</a>
</div>
@code {
[Parameter]
public string PhoneNumber { get; set; }
[Parameter]
public EventCallback<string> onNext { get; set; }
[Parameter]
public EventCallback<string> PhoneNumberChanged { get; set; }
char Placeholder = '_';
private async Task GoToNextStep()
{
await PhoneNumberChanged.InvokeAsync(PhoneNumber);
await onNext.InvokeAsync(PhoneNumber);
}
}