Angular2 入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

NgControlName - 命名控件指令

如前所述,NgControlName指令必须作为NgFormNgFormModel的后代使用, 因为这个指令需要将创建的控件对象添加到祖先(NgForm或NgFormModel)所创建 的控件组中。

NgControlName指令的选择符是[ng-control],这意味着你必须在一个HTML元素上 定义ng-control属性,这个指令才会起作用。

属性:ngControl

NgControlName指令为宿主的DOM对象创建一个控件对象,并将这个对象以ngControl属性 指定的名称绑定到DOM对象上:

<form #f="form">
    <input type="text" ng-control="user">
    <input type="password" ng-control="pass">
</form>

在上面的代码中,将创建两个Control对象,名称分别为userpass

属性/方法:ngModel

除了使用控件组获得输入值,NgControlName指令可以通过ngModel实现模型 与表单的双向绑定:

<form>
    <input type="text" ng-control="user" [(ng-model)]="data.user">
    <input type="password" ng-control="pass" [(ng-model)]="data.pass">
</form>`

ngModel即是NgControlName指令的属性,也是它的事件,所以下面 的两种写法是等价的:

<input type="text" ng-control="user" [(ng-model)]="data.user">
//等价于
<input type="text" ng-control="user" [ng-model]="data.user" (ng-model)="data.user">