在angular js中用8位数填完所有输入栏和移动栏后如何启用Button？

Question

我想启用我的提交按钮，当用户把所有的细节在各自的领域和8到12位的手机号码。

现在，我的代码只接受手机号码条件，当用户输入8位手机号码时，我的按钮将启用。

但我想让他把所有的细节和8位数字的手机号码，然后只有我的提交按钮应该启用

这是我的代码：

<form name="signUpForm" class="list form-margin" ng-submit="submit(data)">
    <input type="text" ng-model="data.data.User.name" required>

    <select ng-disabled="show" class="dropdown-full sign-up-select country-dd"
            ng-model="data.data.User.internationalcode">
    <option value="">Country Code</option>
    <option value="+91">(IND)+91</option> 
    </select>

    <input type="text" ng-disabled="show" maxlength="12"
           placeholder="Mobile No" ng-model="data.data.User.mobile"
           ng-keyup="{{data.data.User.mobile.length>=8 ? otpButton=true : otpButton=false}}"
           required>            

    <input type="password" placeholder="Choose a password" 
           class="input-type" ng-model="data.data.User.password" required>

    <div>
       <button id="btn-send-otp" ng-disabled="!otpButton"
               type="submit" ng-click="disableButton($event);sendOTP();">
         Submit
       </button>
    </div>

</form>

任何形式的帮助都会受到高度的感谢。谢谢

Answer 1

我会将ng-pattern与required一起使用：

<input type="text" maxlength="12"
      placeholder="Mobile No"
      ng-model="data.data.User.mobile"
      ng-pattern="'\\d{8,12}'" required> <!-- Use ng-pattern here -->

对于您的submit按钮，将您的ng-disabled指令的表达式更改为：

ng-disabled="signUpForm.$invalid"

什么是\\d{8,12}？这是一个简单的Regular Expression，可以说任何数字，长度为8-12。

有关Angular Forms的更多信息，请参阅here。

Answer 2

当用户填写了所有输入字段时，您可以使用ng-if或ng-show：

       <button id="btn-send-otp" ng-if="data.data.User.name && data.data.User.internationalcode" ng-disabled="!otpButton" type="submit" ng-click="disableButton($event);sendOTP();">Submit</button>