Instantly share code, notes, and snippets.

Embed
What would you like to do?
Umbraco Login Form with Angular validation
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@using System.Web.Mvc.Html
@using ClientDependency.Core.Mvc
@using Umbraco.Web
@using Umbraco.Web.Models
@using Umbraco.Web.Controllers
@{
var loginModel = new LoginModel();
Html.RequiresJs("https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js");
Html.RequiresJs("/scripts/app.js");
}
<div ng-controller="LoginFormController">
@using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", null, new { novalidate = "", name = "loginform", ng_submit = "loginFormSubmit($event)" }, FormMethod.Post))
{
<fieldset>
<legend>Login</legend>
@Html.LabelFor(m => loginModel.Username)
@Html.TextBoxFor(m => loginModel.Username, new { name = "username", ng_model = "username", ng_pattern= "emailRegex", required = "required" })
<p ng-show="validation && loginform['loginModel.Username'].$error.required">Username is required</p>
<p ng-show="validation && loginform['loginModel.Username'].$error.pattern">Please enter valid email address</p>
<br />
@Html.LabelFor(m => loginModel.Password)
@Html.PasswordFor(m => loginModel.Password, new { name="password", ng_model = "password", required = "required" })
<p ng-show="validation && loginform['loginModel.Password'].$error.required">Password is required</p>
<br />
<button>Login</button>
</fieldset>
}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment