使用ng更改验证现有的用户id

Question

因此，我试图使用创建一个用户id验证，问题是我的if/else statement是错误的。因为有时它给了我错误的值，让我的ng-class在输入时工作，但是一旦输入被删除，它就给了我错误的值。

html

<div ng-class="{'has-success': vm.value == 'true', 'has-danger': vm.value == 'false'}">
     <input type="text" name="userId" class="form-control form-control-sm" ng-class="{'form-control-success': vm.value == 'true', 'form-control-danger': vm.value == 'false'}"
                placeholder="Username" ng-model="userData.userId" ng-change="vm.checkId(userData.userId)" ng-pattern="/^[a-zA-Z0-9]*$/" ng-minlength="5" ng-maxlength="14" required>
     <div ng-messages="regForm.userId.$error" class="colorValid" role="alert">
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
       <div ng-message="pattern">Invalid Characters</div>
    </div>
 </div>

控制器

function checkId(data) {
    if (data) {
      return dataservice.getUser(data).then(function (data) { // get request
        if (data) {
          console.log('User-ID not available');
          vm.value = 'false';
        }else {
          vm.value = 'true';
          console.log(data);
          console.log('User-ID Available');
        }
      });
    } else {
      vm.value = 'null';
    }
}

谢谢，欢迎任何建议。

Answer 1

首先，您对API调用返回的checkId参数和数据使用相同的变量名，因此很难理解您的意图是什么。另外，请澄清getUser()在“数据”中返回的内容。

尝试在修改代码之后添加检查空字符串，因为用户删除了值后，它仍然是设置的，但它是空的。

function checkId(userData) {
  if (userData && userData!="") {
    return dataservice.getUser(userData).then(function (data) {
      if (data!="") {
        console.log('User-ID not available');
        vm.value = 'false';
      } else {
        vm.value = 'true';
        console.log(data);
        console.log('User-ID Available');
      }
    });
  } else {
    vm.value = 'null';
  }
}

Answer 2

function checkId(userID) {
    if (userID != null) {
        return dataservice.getUser(userID).then(function(user) {
            if (user) {
                vm.value = false;
                console.log('User-ID not available');
            }else {
                vm.value = true;
                console.log('User-ID Available');
            }
        });
    } else {
      vm.value = false;
    }
}

并将html更改为：

<div ng-class="{ 'has-success': vm.value, 'has-danger': !vm.value }">
    <input type="text" name="userId" class="form-control form-control-sm" ng-class="{'form-control-success': vm.value, 'form-control-danger': !vm.value}" placeholder="Username" ng-model="userData.userId" ng-change="vm.checkId(userData.userId)" ng-pattern="/^[a-zA-Z0-9]*$/" ng-minlength="5" ng-maxlength="14" required>
     <div ng-messages="regForm.userId.$error" class="colorValid" role="alert">
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
        <div ng-message="pattern">Invalid Characters</div>
    </div>
 </div>