windows forms_AngularJS Forms自定义模型更新触发器

windows forms

In the previous post, we looked at some of the basic forms and custom form validations in angularJS.  We discussed these concepts with some examples in the earlier post. In this post, we are going to discuss about a directive introduced Angular 1.3 called ng-model-options and how it is used in our forms to control the model updates.

在上一篇文章中，我们介绍了angularJS中的一些基本表单和自定义表单验证。 我们在较早的文章中通过一些示例讨论了这些概念。 在本文中，我们将讨论引入Angular 1.3的指令ng-model-options以及如何在我们的表单中使用它来控制模型更新。

ngModelOptions (ngModelOptions)

The ngModelOptions gives us control over how Angular updates and manipulates your model. By default, any change to the content will trigger a model update and form validation. We can override this default behavior using ngModelOptions directive. This includes customizing the model to update only after certain events are triggered or non-immediate model updates/debouncing delay, so that the actual update takes place only when a timer expires. We will discuss these two things in this post.

ngModelOptions使我们可以控制Angular如何更新和操作模型。 默认情况下，对内容的任何更改都会触发模型更新和表单验证。 我们可以使用ngModelOptions指令覆盖此默认行为。 这包括自定义模型，使其仅在触发某些事件或非立即的模型更新/弹跳延迟之后才进行更新 ，以便仅在计时器到期时才进行实际更新。 我们将在本文中讨论这两件事。

句法 (Syntax)

The following code shows the usage of ngModelOptions directive in angularJS.

以下代码显示了ngModelOptions指令的用法。

<input ng-model="employee.name" ng-model-options="Object" />

Here Object denotes the options that can be applied to the current model. The following optionS are used:

在这里， 对象表示可以应用于当前模型的选项。 使用以下选项：

• updateOn : A string value specifying the events in which the input is bound to. You can specify multiple events using a space delimited list like  ng-model-options="{ updateOn: 'blur mouseover' }"
  updateOn ：一个字符串值，指定输入绑定到的事件。 您可以使用空格分隔的列表指定多个事件，例如ng-model-options="{ updateOn: 'blur mouseover' }"
• debounce: Defines an integer value which denotes a model update delay in milliseconds. We can set the value to zero if we want to trigger an immediate update. You can use this option like ng-model-options="{ updateOn: 'blur',  debounce: { 'blur': 0} }"
  debounce ：定义一个整数值，该值表示模型更新延迟（以毫秒为单位）。 如果要触发立即更新，可以将值设置为零。 您可以使用ng-model-options="{ updateOn: 'blur', debounce: { 'blur': 0} }"
• allowInvalid:  It’s a boolean value which indicates that the model value can be set regardless of the validity of the field. The default value for model is undefined if we are not specifying the allowInvalid option.
  allowInvalid ：这是一个布尔值，指示可以设置模型值，而与字段的有效性无关。 如果我们未指定allowInvalid选项，则模型的默认值为undefined。
• getterSetter: boolean value used to determine whether to treat function bound to model as getters or setters or not.
  getterSetter ：布尔值，用于确定是否将绑定到模型的函数视为getter或setter。
• timezone: Defines the time zone to be used.
  timezone ：定义要使用的时区。

使用updateOn和debounce选项 (Using updateOn and debounce option)

The following example demonstrates the use of updateOn and debouce option in the ngModelOptions directive.

以下示例演示了ngModelOptions指令中updateOn和debouce选项的ngModelOptions 。

We defined a FormController in the formApp module and created an employee object in its scope.

我们在formApp模块中定义了一个FormController ，并在其范围内创建了一个employee对象。

app.js

app.js

var app = angular.module('formApp', []);

	app.controller('FormController', function($scope) {
		$scope.employee = {};
	});

The novalidate attribute is used to disable the default browser validation in HTML5.
In the following code, you can see how we used updateOn option of the ng-model-options directive. The model value updates when the focus is lost.

novalidate属性用于禁用HTML5中的默认浏览器验证。
在以下代码中，您可以看到我们如何使用ng-model-options指令的updateOn选项。 失去焦点时，模型值将更新。

Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"/>

The following code is used to update the model after 250 milliseconds. The debounce option delays the model update.

以下代码用于在250毫秒后更新模型。 debounce选项会延迟模型更新。

Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"/>

The following code uses both updateOn and debounce option. Setting the debounce value of blur event to ‘0’ indicates that the model trigger immediate update when it is out of focus.

以下代码同时使用了updateOn和debounce选项。 将模糊事件的debounce值设置为“ 0”表示模型在未聚焦时触发立即更新。

Email : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"/>

The following example shows the usage of these concepts.

以下示例显示了这些概念的用法。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>AngularJS Custom Model Update</title>
	</head>

	<body ng-app="formApp">
		<div ng-controller="FormController">

			<form novalidate>
				Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"/></br>

				Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"/></br>

				E-mail : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"/></br>

			</form>

  			<p>Name : {{employee.name}}</p>
			<p>Gender : {{employee.gender}}</p>
			<p>Email : {{employee.email}}</p>
		</div>

		</div>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

Now you can play with following output and see the difference of these options.

现在，您可以播放以下输出，并查看这些选项的区别。

演示地址

The
angularJS 1.3中引入的 ng-model-options directive introduced in angularJS 1.3 is very useful in form handling and validation. You have to use it carefully for better results. That’s all for now and you will see more angular features in the coming posts. ng-model-options指令在表单处理和验证中非常有用。 您必须仔细使用它以获得更好的结果。 到此为止，您将在以后的文章中看到更多的角度特征。

翻译自: https://www.journaldev.com/7967/angularjs-forms-custom-model-update-triggers

windows forms