Skip to content

Instantly share code, notes, and snippets.

@meziantou
Created June 24, 2014 07:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save meziantou/a4e0fd21edb3e5624f5d to your computer and use it in GitHub Desktop.
Save meziantou/a4e0fd21edb3e5624f5d to your computer and use it in GitHub Desktop.
Angularjs RegisterForm
app.directive('input', ['$parse', function ($parse) {
/*
* Initialize model from input value
*/
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel && attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
}]);
app.directive('textarea', ['$parse', function ($parse) {
/*
* Initialize model from textarea value
*/
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel) {
var object = element[0];
var text = object.textContent;
$parse(attrs.ngModel).assign(scope, text);
}
}
};
}]);
app.directive('compare', [function () {
/*
* <input type="password" ng-model="password2" password-match="password1" />
*/
return {
restrict: 'A',
scope: true,
require: 'ngModel',
link: function (scope, elem, attrs, control) {
var checker = function () {
//get the value of the first password
var e1 = scope.$eval(attrs.ngModel);
//get the value of the other password
var e2 = scope.$eval(attrs.compare).$modelValue;
return e1 == e2;
};
scope.$watch(checker, function (n) {
//set the form control to valid if both
//passwords are the same, else invalid
control.$setValidity("compare", n);
});
}
};
}]);
<section id="registerForm">
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", name = "registerForm" }))
{
@Html.AntiForgeryToken()
<h4>@SR.CreateNewAccount</h4>
<hr />
@Html.ValidationSummary()
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.Email.$invalid, 'has-success': registerForm.Email.$valid}">
@Html.LabelFor(m => m.Email, new { @class = "col-md-3 control-label" })
<div class="col-md-6">
@Html.EditorFor(m => m.Email, new { htmlAttributes = new { @class = "form-control", required = "", ng_model = "Email" } })
</div>
</div>
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.Password.$invalid, 'has-success': registerForm.Password.$valid}">
@Html.LabelFor(m => m.Password, new { @class = "col-md-3 control-label" })
<div class="col-md-6">
@Html.EditorFor(m => m.Password, new { htmlAttributes = new { @class = "form-control", required = "", ng_model = "Password", ng_minlength = MoneizSection.MinimumPasswordLength, ng_maxLength = MoneizSection.MaximumPasswordLength } })
</div>
<span class="text-danger" ng-show="registerForm.Password.$error.minlength">
@SR.FormatPasswordTooShort(MoneizSection.MinimumPasswordLength)
</span>
</div>
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.ConfirmPassword.$invalid, 'has-success': registerForm.ConfirmPassword.$valid}">
@Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-3 control-label" })
<div class="col-md-6">
@Html.EditorFor(m => m.ConfirmPassword, new { htmlAttributes = new { @class = "form-control", required = "", ng_model = "ConfirmPassword", compare = "registerForm.Password" } })
</div>
<span class="text-danger" ng-show="!registerForm.ConfirmPassword.$error.required && registerForm.ConfirmPassword.$error.compare">
@SR.PasswordDoesNotMatch
</span>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<input type="submit" class="btn btn-default" value="@SR.SignUp" ng-disabled="registerForm.$invalid" />
</div>
</div>
<p class="help-block">
<small>@Html.Raw(SR.FormatLoginIfAccount(Url.Action("Login")))</small>
</p>
}
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment