javascript - Jhipster 生成应用程序，默认 AngularJS 注册表单

Question

我使用 JHipster 创建了一个应用程序并尝试编辑“register.html”。我需要帮助的代码如下所示:

<div class="alert alert-success" ng-show="vm.success" data translate="register.messages.success">
    <strong>Registration saved!</strong> Please check your email for confirmation.
</div>

<div class="alert alert-danger" ng-show="vm.error" data-translate="register.messages.error.fail">
    <strong>Registration failed!</strong> Please try again later.
</div>

我省略了其余的代码，因为它们与这两个相同，只是消息和 ng-models 不同。 &register.controller.js:

(function() {
'use strict';

angular
    .module('MyApp')
    .controller('RegisterController', RegisterController);


RegisterController.$inject = ['$translate', '$timeout', 'Auth', 'LoginService'];

function RegisterController ($translate, $timeout, Auth, LoginService) {
    var vm = this;

    vm.doNotMatch = null;
    vm.error = null;
    vm.errorUserExists = null;
    vm.login = LoginService.open;
    vm.register = register;
    vm.registerAccount = {};
    vm.success = null;

    $timeout(function (){angular.element('#login').focus();});

    function register () {
        if (vm.registerAccount.password !== vm.confirmPassword) {
            vm.doNotMatch = 'ERROR';
        } else {
            vm.registerAccount.langKey = $translate.use();
            vm.doNotMatch = null;
            vm.error = null;
            vm.errorUserExists = null;
            vm.errorEmailExists = null;

            Auth.createAccount(vm.registerAccount).then(function () {
                vm.success = 'OK';
            }).catch(function (response) {
                vm.success = null;
                if (response.status === 400 && response.data === 'login already in use') {
                    vm.errorUserExists = 'ERROR';
                } else if (response.status === 400 && response.data === 'e-mail address already in use') {
                    vm.errorEmailExists = 'ERROR';
                } else {
                    vm.error = 'ERROR';
                }
            });
        }
    }
}
})();

我的问题是默认情况下错误处理消息必须隐藏，一旦表单被评估，它们应该根据条件显示。但我不知道如何使这项工作......以下是默认的 register.html 页面:

Answer 1

生成的 register.html 默认情况下不显示这些消息。看起来您只是将 HTML 文件加载到浏览器中，但您需要运行应用程序并从那里加载 index.html 来运行 Angular 代码。

运行 ./mvnw 或 ./gradlew 并访问前端 http://localhost:8080您还可以运行 gulp ，它将为您的前端提供服务 http://localhost:9000当您进行更改时实时重新加载。更多信息可以在Using JHipster in development中找到文档

正确运行时，注册页面如下图所示: