ngModel 指令是一个非常实用的工具,用于将 HTML 控件(如 input、select 和 textarea)或任何自定义表单控件的值绑定起来。它将所需的用户值存储在一个变量中,方便我们在需要时随时调用。此外,它在表单验证过程中也扮演着重要角色。各种表单输入类型(如 text、checkbox、radio、number、email、URL、date、datetime-local time、month、week)都可以与 ngModel 指令 配合使用。该指令受到 、 和 标签的支持。
语法:
内容...
示例 1: 这个示例描述了 ng-model 指令在 AngularJS 中的基本用法。
HTML
CODEBLOCK_88047d7b
输出结果:
需要注意的是,为了显示 URL 和 email,我们必须输入有效的 email/URL 格式,它们才会被打印出来。如果使用 ngmodel 来打印日期和时间,我们必须填入输入框中的所有字段。单选按钮一旦被选中就无法取消选中,因为在 "c" 函数中,我们将 choice 的值设置为了 true。
使用 ng-model 指令的 HTML 表单: 我们可以通过在 app.component.html 文件中编写以下代码,来定义 ngModel。
{{ phone.value }}
ngModel 指令通过引用而非值来存储变量。这通常发生在将输入绑定到对象(例如 Date)或集合(例如数组)模型时。创建的 phone 对象包含许多用于验证目的的字段。以下是用于验证的类列表:
- ng-touched:表示该字段已被触碰。
- ng-untouched:表示该字段尚未被触碰。
- ng-valid:指定字段内容是有效的。
- ng-invalid:指定字段内容无效。
- ng-dirty:表示该字段已被修改。
- ng-pristine:表示该字段尚未被修改。
结合 getter 和 setter 绑定 ngModel: 每当