Angular学习笔记-模板式表单

最新推荐文章于 2022-04-19 16:25:22 发布

原创最新推荐文章于 2022-04-19 16:25:22 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Angular中的两种表单处理方式：模板式表单和响应式表单。详细讲解了模板式表单的各种指令如ngForm、ngModel等，并提供了一个具体的示例。

Angular提供了两种表单处理方式

模板式表单
响应式表单

两种表单处理方式的不同点：

模板式表单：其数据模型是通过组件模板中的相关指令来定义的。因为受限于HTML的语法，只适用于简单的表单场景。
响应式表单:使用ts创建底层模型，运用特定的指令将模板和底层ts数据模型绑定。

模板式表单指令

指令	隐式创建实例
ngForm	FromGroup
ngModel	FormControl
ngModelGroup	FormGroup

ngForm
在这个标签作用域下，标记HTML元素应该成为表单数据的一部分
因为Angular是单页应用，所以会拦截表单提交，可使用事件(ngSubmit)=‘XXX’
Angular会在form标签上自动添加ngFrom 指令，可使用ngNoForm使Angular不接管
ngForm也可以用在div标签上
ngForm会自动标记ngModel元素
在form标签上引用本地变量#localform，#localform = ''ngForm,相当于FormGroup的实例化
对象赋值给了localform,所以，可以使用localform.value可以取得表单中定义ngModel的name的值

ngModel
定义ngModel必须定义name的值

ngFormGroup
ngFormGroup是ngForm的子对象，其值是对象

模板式表单的小栗子

HTML

<form #localform="ngForm" (ngSubmit)="onSubmit(localform.value)" >
    <div>用户名：<input #localModel="ngModel" ngModel name="nickname" type="text"></div>
    <div>手机号：<input ngModel name="mobilephone" type="text"></div>
    <div ngModelGroup="passwordsGroup" >
        <div>密码：<input ngModel name="password" type="text"></div>
        <div>确认密码：<input ngModel name="passwordConfirm"  type="text"></div>     
    </div>

    <button type="submit">注册</button>
</form>
<div>{{localform.value | json}}</div>
<div>{{localModel.value | json}}</div>

 onSubmit(info){
    console.log(info);
  }