AngularJs form

simple form

 The ngModel directive implements two-way data binding, that is, the model and the view are synchronized in both directions, and it also provides APIs for other directives to extend the behavior of ngModel.

 

<div ng-controller="ExampleController">  
  <form novalidate class="simple-form">  
    Name: <input type="text" ng-model="user.name" /><br />  
    E-mail: <input type="email" ng-model="user.email" /><br />  
    Gender: <input type="radio" ng-model="user.gender" value="male" />male  
    <input type="radio" ng-model="user.gender" value="female" />female<br />  
    <input type="button" ng-click="reset()" value="Reset" />  
    <input type="submit" ng-click="update(user)" value="Save" />  
  </form>  
  <pre>form = {{user | json}}</pre>  
  <pre>master = {{master | json}}</pre>  
</div>  
  
<script>  
  angular.module('formExample', [])  
    .controller('ExampleController', ['$scope', function($scope) {  
      $scope.master = {};  
  
      $scope.update = function(user) {  
        $scope.master = angular.copy(user);  
      };  
  
      $scope.reset = function() {  
        $scope.user = angular.copy($scope.master);  
      };  
  
      $scope.reset();  
    }]);  
</script>   

novalidate indicates that no validation logic is added. Various input controls are defined in the form group to bind to different attributes of the model user. When the user inputs, the form information will be continuously updated. Clicking the "Save" button will save the current form. Save the value of the master variable to the master variable, and the master information will be updated accordingly. Clicking the "Reset" information will reset the information of the form, that is, assign the previously saved snapshot master to the user. Here, a deep copy is made through the angular.copy function.

 

form css style

- ng-valid: CSS style when data is valid

    - ng-invalid: CSS style when data is invalid

    - ng-valid-[key]: The style that takes effect when the key specified by $setValidity is valid

    - ng-invalid-[key]: The style that takes effect when the key specified by $setValidity is invalid

    - ng-pristine: style when the form control has not been interacted with

    - ng-dirty: The style that takes effect after interacting with the control

    - ng-touched: style for the control to lose focus

    - ng-untouched: style when the control does not lose focus

    - ng-pending: The style that waits for (in-progress) to take effect during the asynchronous verification process

As reflected by the above styles, the controls corresponding to the user's name and email attributes are added with the required attribute, and a red prompt will be marked when the user does not enter the name and email information.

Custom trigger update model

Each input to the form triggers synchronization with the model and validation of the form. We can change the trigger conditions for model synchronization and form validation through the ngModelOptions directive. For example ng-model-options="{ updateOn: 'blur' }" will cause Angular to update the model or perform validation when the input control loses focus. Multiple events are separated by whitespace, for example:

ng-model-options="{ updateOn: 'mousedown blur' }". If you keep the default trigger condition and add a new trigger event, plus the "default" option,

例如：ng-model-options="{ updateOn: 'default blur' }".

<div ng-controller="ExampleController">  
  <form>  
    Name:  
    <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br />  
    Other data:  
    <input type="text" ng-model="user.data" /><br />  
  </form>  
  <pre>username = "{{user.name}}"</pre>  
  <pre>userdata = "{{user.data}}"</pre>  
</div>  

 

angular.module('customTriggerExample', [])  
.controller('ExampleController', ['$scope', function($scope) {  
  $scope.user = {};  
}]);