Fix new user form to show errors

This commit is contained in:
Arik Fraimovich 2016-11-09 11:48:42 +02:00
parent 3583f57d00
commit 98cc0fe1ce
6 changed files with 30 additions and 30 deletions

View File

@ -0,0 +1,20 @@
const ErrorMessagesComponent = {
template: `
<div class="help-block" ng-messages="$ctrl.input.$error" ng-show="$ctrl.input.$touched || $ctrl.form.$submitted">
<span class="error" ng-message="required">This field is required.</span>
<span class="error" ng-message="minlength">This field is too short.</span>
<span class="error" ng-message="email">This needs to be a valid email.</span>
</div>
`,
replace: true,
bindings: {
input: '<',
form: '<',
},
controller() {
},
};
export default function (ngModule) {
ngModule.component('errorMessages', ErrorMessagesComponent);
}

View File

@ -10,3 +10,4 @@ export { default as permissionsEditor } from './permissions-editor';
export { default as dynamicTable } from './dynamic-table';
export { default as paginator } from './paginator';
export { default as settingsScreen } from './settings-screen';
export { default as errorMessages } from './error-messages';

View File

@ -110,3 +110,7 @@ export function remove(items, item) {
export function notEmpty(collection) {
return !isEmpty(collection);
}
export function showError(field, form) {
return (field.$touched && field.$invalid) || form.$submitted;
}

View File

@ -1,34 +1,25 @@
<settings-screen>
<email-settings-warning function="'invite emails'"></email-settings-warning>
{{$ctrl.test}}
<form class="form" name="$ctrl.userForm" ng-submit="saveUser()" novalidate>
{{$ctrl.test}}
<div class="form-group required" ng-class="{ 'has-error': $ctrl.userForm.name.$touched && $ctrl.userForm.name.$invalid }">
<div class="form-group required" ng-class="{ 'has-error': ($ctrl.userForm.email | showError:$ctrl.userForm )}">
<label class="control-label">Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" ng-disabled="user.created" required/>
<div class="help-block" ng-messages="$ctrl.userForm.name.$error" ng-show="$ctrl.userForm.name.$touched">
<span class="error" ng-message="required">This field is required.</span>
<span class="error" ng-message="minlength">This field is too short.</span>
<span class="error" ng-message="email">This needs to be a valid email.</span>
</div>
<error-messages input="$ctrl.userForm.name" form="$ctrl.userForm"></error-messages>
</div>
<div class="form-group required" ng-class="{ 'has-error': $ctrl.userForm.email.$touched && $ctrl.userForm.email.$invalid }">
<div class="form-group required" ng-class="{ 'has-error': ($ctrl.userForm.email | showError:$ctrl.userForm ) }">
<label class="control-label">Email</label>
<input name="email" type="email" class="form-control" ng-model="user.email" ng-disabled="user.created" required/>
<div class="help-block" ng-messages="$ctrl.userForm.email.$error" ng-show="$ctrl.userForm.email.$touched">
<span class="error" ng-message="required">This field is required.</span>
<span class="error" ng-message="minlength">This field is too short.</span>
<span class="error" ng-message="email">This needs to be a valid email.</span>
</div>
<error-messages input="$ctrl.userForm.email" form="$ctrl.userForm"></error-messages>
</div>
<div class="form-group" ng-if="!user.created">
<button class="btn btn-primary">Create</button>
</div>
<div ng-if="user.created" class="alert alert-success">
<p>
<strong>The user has been created and should receive an invite email soon.</strong>

View File

@ -257,17 +257,6 @@
};
});
directives.directive('inputErrors', function () {
return {
restrict: "E",
templateUrl: "/views/directives/input_errors.html",
replace: true,
scope: {
errors: "="
}
};
});
directives.directive('onDestroy', function () {
/* This directive can be used to invoke a callback when an element is destroyed,
A useful example is the following:

View File

@ -1,5 +0,0 @@
<div>
<span class="help-block error" ng-if="errors.required">This field is required.</span>
<span class="help-block error" ng-if="errors.minlength">This field is too short.</span>
<span class="help-block error" ng-if="errors.email">This needs to be a valid email.</span>
</div>