如何将$asyncValidators与 angularjs 一起使用并在 HTML 中设置警告消息

Question

这是我第一个带有验证等的更大表单。我已经创建了一个注册表单，并且正在使用ng消息进行验证。问题是我需要验证用户名，它是否已经存在于我们正在使用的 JSON 服务器中或可用。当然，如果它被接受，警告会在用户名输入所在的HTML中弹出，如果它可用，提交按钮不再被禁用(因为表单将被$valid(，用户可以注册。我想使用角度消毒，因为我发现了这个(我不知道它们是否相关(：

    ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
      var value = modelValue || viewValue;
      // Lookup user by username
      return $http.get('/api/users/' + value).
         then(function resolved() {
           //username exists, this means validation fails
           return $q.reject('exists');
         }, function rejected() {
           //username does not exist, therefore this validation passes
           return true;
         });
    };

这是我现在使用的代码(注册表单、控制器和服务(：

// Controller:
export default class registerPageController {
  constructor(userService, authenticationService, $location) {
    this.register = "Register";
    this.userService = userService;
    this.$location = $location;
    this.authenticationService = authenticationService;
    this.hasLoggedIn = false;
  }
  onSubmit(user) {
    let self = this;
    let {
      name,
      age,
      email,
      username,
      password
    } = user;
    self.userService.register(name, age, email, username, password).then((res) => {
        self.userService.login(username, password).then(function (response) {
          let data = response.data;
          if (data.length) {
            let user = data[0];
            self.hasLoggedIn = true;
            self.authenticationService.setCredentials(username, password);
            self.$location.path('/');
          }
        });
      })
      .catch(err => {
        // WHAT TO PUT HERE AFTER THE USERNAME EXIST VALIDATION ?
      })
  }
}
// Service:
export class UserService {
  constructor($http) {
    this.$http = $http;
  }
  login(username, password) {
    return this.$http({
      method: 'GET',
      url: 'http://localhost:3000/users',
      params: {
        username: username,
        password: password
      }
    });
  }
  register(name, age, email, username, password) {
    return this.$http({
      method: 'POST',
      url: 'http://localhost:3000/users',
      data: {
        name: name,
        age: age,
        email: email,
        username: username,
        password: password
      }
    });
  }
// SHOULD I PUT HERE THE USERNAME EXIST VALIDATION LOGIC ?
}

<div class="container main-content">
  <form class="registrationForm" name="registerForm" ng-submit="register.onSubmit(register.user)" novalidate="novalidate">
    <!-- Enter Name -->
    <div class="form-group">
      <label for="name" class="control-label"><span id="reqInfo">*</span> Name</label>
      <input type="text" name="name" class="form-control" ng-model="register.user.name" ng-pattern="/[a-zA-Zа-яА-Я]+/" id="name"
        required="" placeholder="Example: Petar Petrov">
      <div ng-messages="registerForm.name.$error" ng-show="registerForm.name.$touched" style="color:maroon" role="alert">
        <div ng-message="required">Your name is required</div>
      </div>
    </div>
    <!-- User Age-->
    <div class="form-group">
      <label for="age" class="control-label"><span id="reqInfo">*</span> Age</label>
      <input type="number" name="age" class="form-control" ng-model="register.user.age" ng-min="18" min="18" id="age" required=""
        placeholder="Enter your age">
      <div ng-messages="registerForm.age.$error" ng-show="registerForm.age.$touched" style="color:maroon" role="alert">
        <div ng-message="min">You must be at leats 18 years old</div>
      </div>
    </div>
    <!-- Enter E-mail -->
    <div class="form-group">
      <label for="email" class="control-label"><span id="reqInfo">*</span> E-mail</label>
      <input type="email" name="email" class="form-control" ng-model="register.user.email" ng-pattern="/((([A-Za-z]{3,9}:(?://)?)(?:[-;:&=+$,w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,w]+@)[A-Za-z0-9.-]+)((?:/[+~%/.w-_]*)???(?:[-+=&;%@.w_]*)#?(?:[.!/\w]*))?)/"
        id="email" required="" placeholder="Example: [e-mail]">
      <div ng-messages="registerForm.email.$error" ng-show="registerForm.email.$touched" style="color:maroon" role="alert">
        <div ng-message="required">Your valid e-mail is required</div>
      </div>
      <br>
      <!-- Enter Username -->
      <div class="form-group">
        <label for="username" class="control-label"><span id="reqInfo">*</span> Username</label>
        <input type="text" name="username" ng-minlength="5" ng-maxlength="20" class="form-control" ng-model="register.user.username"
          ng-pattern="/^[A-Za-z0-9_]{1,32}$/" ng-minlength="7" id="username" required="" placeholder="Enter your username">     
        <div ng-messages="registerForm.username.$error" style="color:maroon" role="alert">
          <div ng-message="minlength">Your Username must be between 7 and 20 characters long</div>
        </div>
        <br>
        <!-- Enter Password -->
        <div class="form-group">
          <label for="password" class="control-label"><span id="reqInfo">*</span> Password</label>
          <input type="password" name="password" class="form-control" ng-model="register.user.password" ng-minlength="7" id="password"
            required="" placeholder="Enter your password">
          <div ng-messages="registerForm.password.$error" style="color:maroon" role="alert">
            <div ng-message="minlength">You Password must be at least 7 symbols long</div>
          </div>
        </div>
        <!-- Register button -->
        <div class="form-group">
          <button class="btn btn-primary" type="submit" ng-disabled="!registerForm.name.$valid || !registerForm.age.$valid || !registerForm.email.$valid || !registerForm.username.$valid || !registerForm.password.$valid">Register</button>
        </div>
        <p>Fields with <span id="reqInfo">*</span> must be filled.</p>
  </form>
  </div>

重要的是要知道我被明确告知要用 ES6 编写它。我对逻辑有问题，所以看看我的代码，请为我填写它，以便我可以使用它，最重要的是 - 学习它：S提前非常感谢你！

Answer 1

我已经为不同类型的验证(同步异步(实现了一个指令，它也支持警告。您可以从以下位置查看

`https://plnkr.co/2WQHOo`

如果这是您需要的并且需要更多信息，请告诉我我会尽力回答。