输入空白可以使呈角度形式的提交按钮能够进行修剪和验证

Question

我有一个表单，在这个表单中我需要验证密码字段。在我的表单字段中，如果我只输入一个空格，则submit按钮将被启用。那么如何防止这种情况发生呢？

此外，我想将"重新输入"密码字段与我的密码字段进行比较，如何将两者进行比较？

一旦它们都正确，我想启用提交按钮。甚至我可能需要限制用户在密码字段中输入最小6个字符。

目前我没有犯任何错误。

她是我的代码：

<form name="myForm" novalidate ng-submit="myFormDetails(userInfo)">
      <label for="password">
        Enter Password
        <input type="password" name="password" ng-model="userInfo.password" id="password" required>
        <span class="error"  
          ng-show="myForm.password.$dirty && myform.password.$invalid">
            Please Provide Valid Password
          </span>
      </label>
      <label for="password">
        Re-Enter Password
        <input type="password" name="repassword" id="repassword" ng-model="userInfo.repassword" required>
        <span class="error" 
        ng-show="myForm.repassword.$dirty && myform.repassword.$invalid">
          Password not matching
      </span>
      </label>
      <label for="submit">
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
      </label>
    </form>

实时演示

Answer 1

您可以使用ng模式来提供一个排除空格的正则表达式：

ng-pattern="/^[^s]+$/"    

然后将其添加到ng显示中，以确保密码相同：

ng-show="myForm.repassword.$dirty &&
      (userInfo.password != userInfo.repassword || !myForm.repassword.$valid)"

Plunker：http://plnkr.co/edit/cDbTN8x8bSl03NkpGWhO

Answer 2

您可以简单地将检查添加到禁用ng的参数中。我个人更喜欢使用控制器中的函数，这使模板更容易阅读，因为其中应该尽可能少的逻辑。

this.isInvalid = function() {
    var myForm = $scope.myForm;
    var valid = myForm.$valid;
    valid = valid && myForm.password.$modelValue.trim().length > 0;
    valid = valid && myForm.repassword.$modelValue.trim().length > 0;
    valid = valid && myForm.password.$modelValue.trim() === myForm.repassword.$modelValue.trim();
    return !valid;
};

我已经把你的笨蛋叉成这样了：http://plnkr.co/edit/qaWaXxnCi63uCS8oLyB1?p=preview