Skip to content

Commit

Permalink
Switch is invoking EditContext OnFieldChanged even the change was not…
Browse files Browse the repository at this point in the history
… from UI #297 (#301)
  • Loading branch information
gvreddy04 authored Jul 24, 2023
1 parent 5c50be2 commit 5a0d807
Show file tree
Hide file tree
Showing 10 changed files with 370 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@
</div>
<Demo Type="typeof(Switch_Demo_04_Events_Value_Changed)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Form" PageUrl="@pageUrl" HashTagName="form" />
<Demo Type="typeof(Switch_Demo_05_Form)" Tabs="true" />

@code {
private string pageUrl = "/form/switch";
private string title = "Blazor Switch Component";
private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox.";
private string imageUrl = "https://i.imgur.com/iUNBkki.png";
private string imageUrl = "https://i.imgur.com/ALKzreq.png";
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="mt-3">@displaySwitchStatus</div>

<Button Color="ButtonColor.Primary" @onclick="ToogleSwitch"> Toogle Switch </Button>
<Button Color="ButtonColor.Primary" @onclick="ToggleSwitch"> Toggle Switch </Button>

@code {
private bool agree;
Expand All @@ -14,5 +14,5 @@
displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.";
}

private void ToogleSwitch() => agree = !agree;
private void ToggleSwitch() => agree = !agree;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
@using System.ComponentModel.DataAnnotations

<style>
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
<DataAnnotationsValidator />

<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">First name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<InputText class="form-control" @bind-Value="employee.FirstName" Placeholder="Enter first name" />
<ValidationMessage For="@(() => employee.FirstName)" />
</div>
</div>

<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Last name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<InputText class="form-control" @bind-Value="employee.LastName" Placeholder="Enter last name" />
<ValidationMessage For="@(() => employee.LastName)" />
</div>
</div>

<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Active</label>
<div class="col-md-10">
<Switch Class="mt-2" @bind-Value="employee.IsActive" />
</div>
</div>

<div class="row">
<div class="col-md-12 text-right">
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2" Disabled="disableSave">Save</Button>
</div>
</div>
</EditForm>

@code {
private bool disableSave;
private Employee employee = new();
private EditContext editContext;

[Inject] private ToastService ToastService { get; set; }

protected override void OnInitialized()
{
employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true };
editContext = new EditContext(employee);
editContext.OnFieldChanged += HandleFieldChanged;

base.OnInitialized();
}

public void HandleOnValidSubmit()
{
disableSave = !editContext.Validate();

var toastMessage = new ToastMessage
{
Title = "Save Employee Details",
Message = $"Employee details saved successfully.",
AutoHide = true,
Type = ToastType.Success,
IconName = IconName.CheckCircleFill,
};

ToastService.Notify(toastMessage);
}

private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
{
disableSave = !editContext.Validate();

var toastMessage = new ToastMessage
{
Title = "Field Changed Notification",
Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.",
AutoHide = true,
Type = ToastType.Info
};

ToastService.Notify(toastMessage);
}

private void ResetForm()
{
employee = new();
editContext = new EditContext(employee);
editContext.OnFieldChanged += HandleFieldChanged;
}

public class Employee
{
[Required(ErrorMessage = "First name required.")]
public string? FirstName { get; set; }

[Required(ErrorMessage = "Last name required.")]
public string? LastName { get; set; }

public bool IsActive { get; set; }
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@
</div>
<Demo Type="typeof(Switch_Demo_04_Events_Value_Changed)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Form" PageUrl="@pageUrl" HashTagName="form" />
<Demo Type="typeof(Switch_Demo_05_Form)" Tabs="true" />

@code {
private string pageUrl = "/form/switch";
private string title = "Blazor Switch Component";
private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox.";
private string imageUrl = "https://i.imgur.com/iUNBkki.png";
private string imageUrl = "https://i.imgur.com/ALKzreq.png";
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="mt-3">@displaySwitchStatus</div>

<Button Color="ButtonColor.Primary" @onclick="ToogleSwitch"> Toogle Switch </Button>
<Button Color="ButtonColor.Primary" @onclick="ToggleSwitch"> Toggle Switch </Button>

@code {
private bool agree;
Expand All @@ -14,5 +14,5 @@
displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.";
}

private void ToogleSwitch() => agree = !agree;
private void ToggleSwitch() => agree = !agree;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
@using System.ComponentModel.DataAnnotations

<style>
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
<DataAnnotationsValidator />

<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">First name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<InputText class="form-control" @bind-Value="employee.FirstName" Placeholder="Enter first name" />
<ValidationMessage For="@(() => employee.FirstName)" />
</div>
</div>

<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Last name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<InputText class="form-control" @bind-Value="employee.LastName" Placeholder="Enter last name" />
<ValidationMessage For="@(() => employee.LastName)" />
</div>
</div>

<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Active</label>
<div class="col-md-10">
<Switch Class="mt-2" @bind-Value="employee.IsActive" />
</div>
</div>

<div class="row">
<div class="col-md-12 text-right">
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2" Disabled="disableSave">Save</Button>
</div>
</div>
</EditForm>

@code {
private bool disableSave;
private Employee employee = new();
private EditContext editContext;

[Inject] private ToastService ToastService { get; set; }

protected override void OnInitialized()
{
employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true };
editContext = new EditContext(employee);
editContext.OnFieldChanged += HandleFieldChanged;

base.OnInitialized();
}

public void HandleOnValidSubmit()
{
disableSave = !editContext.Validate();

var toastMessage = new ToastMessage
{
Title = "Save Employee Details",
Message = $"Employee details saved successfully.",
AutoHide = true,
Type = ToastType.Success,
IconName = IconName.CheckCircleFill,
};

ToastService.Notify(toastMessage);
}

private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
{
disableSave = !editContext.Validate();

var toastMessage = new ToastMessage
{
Title = "Field Changed Notification",
Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.",
AutoHide = true,
Type = ToastType.Info
};

ToastService.Notify(toastMessage);
}

private void ResetForm()
{
employee = new();
editContext = new EditContext(employee);
editContext.OnFieldChanged += HandleFieldChanged;
}

public class Employee
{
[Required(ErrorMessage = "First name required.")]
public string? FirstName { get; set; }

[Required(ErrorMessage = "Last name required.")]
public string? LastName { get; set; }

public bool IsActive { get; set; }
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@
</div>
<Demo Type="typeof(Switch_Demo_04_Events_Value_Changed)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Form" PageUrl="@pageUrl" HashTagName="form" />
<Demo Type="typeof(Switch_Demo_05_Form)" Tabs="true" />

@code {
private string pageUrl = "/form/switch";
private string title = "Blazor Switch Component";
private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox.";
private string imageUrl = "https://i.imgur.com/iUNBkki.png";
private string imageUrl = "https://i.imgur.com/ALKzreq.png";
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="mt-3">@displaySwitchStatus</div>

<Button Color="ButtonColor.Primary" @onclick="ToogleSwitch"> Toogle Switch </Button>
<Button Color="ButtonColor.Primary" @onclick="ToggleSwitch"> Toggle Switch </Button>

@code {
private bool agree;
Expand All @@ -14,5 +14,5 @@
displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.";
}

private void ToogleSwitch() => agree = !agree;
private void ToggleSwitch() => agree = !agree;
}
Loading

0 comments on commit 5a0d807

Please sign in to comment.