Use ANGULARJS to monitor the disable effect of the form button _ANGULARJS

This blog post is mainly for beginners, for those who are just starting to touch angular and want to know how data binding works.

Here is the main use of the $watch monitoring data changes, and the regular judge whether the data meet the requirements.

Critical HTML code:

<div class= "Row row-form" > <div class= "col col-form" > <div class= "List" > <div class= " Row Row-code "> <div class=" col col-60 col-mobile "> <label class=" Item Item-input mobile-btn " 
        ; 
      <input type= "text" placeholder= "mobile number" name= "Mobile_num" id= "Mobile_num" ng-model= "Mobilenum" > </label> </div> <div class= "col col-40 col-code" > <input type= "button" class= "button button-b 
     Lock code-btn "id=" get_num_btn "ng-click=" GetCode () "ng-value=" info "ng-disabled=" isdisabled "> </div> </div> <label class= "Item Item-input" > <input type= "text" placeholder= "Authentication Code" name= "Check_nu  M "id=" Check_num "ng-model=" Codenum "> </label> <button class=" button Button-block Button-my-style " 
  Id= "SUBMIT_BTN" ng-click= "Submit ()" ng-disabled= "issubmitted" > Submit </button> </div> </div> </div> 
 

Key CSS Code:

 . col-form{ 
 padding:5% 2%; 
 margin-bottom:10% 
} 
. Col-form. List label{ 
  Margin-bottom:0.2rem; 
  Border-radius:0.5rem 
} 
. Col-form. List input{ 
 font:normal 1rem fzltxhjw; 
item-my-style{ 
 Padding:0.5rem 
} 
. row-code{ 
 padding-left:0; 
 padding-right:0 
} 
. button.code-btn{ 
 margin:0; 
 Border-radius:0.5rem; 
 Background-color: #ffba07; 
 Color: #51110a; 
col-mobile{ 
 padding-left:0 
} 
. col-code{ 
 padding-right:0; 
} 

This is mainly the ANGULARJS code section:

var myapp=angular.module (' myApp ', [' Ionic ']); 
Myapp.controller ("Firstcontroller", ["$scope", function ($scope) { 
  //monitor mobile phone number 
  $scope. isdisabled=true; 
  $scope. mobilenum= ""; 
  $scope. Mobileval=function () {return 
    $scope. mobilenum; 
  }; 
  $scope. $watch ($scope. Mobileval,function (newvalue,oldvalue) { 
    var regex =/^ (13[0-9]|14[0-9]|15[0-9]|17[0-9]|18 [0-9]) \d{8}$/; 
    if (Regex.test (NewValue)) { 
      $scope. Isdisabled=false 
    } else{ 
      $scope. Isdisabled=true 
    } 
  }); 
  The verification code 
  $scope. issubmitted=true; 
  $scope. codenum= ""; 
  $scope. Codeval=function () {return 
    $scope. codenum; 
  }; 
  $scope. $watch ($scope. Codeval,function (newvalue,oldvalue) { 
    if (newvalue.length==4) { 
      $scope. issubmitted =false; 
    } else{ 
      $scope. Issubmitted=true 
    } 
  } 
   
); 

Display effect:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.