一.模版式表单

ngForm作用：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

a.ngForm指令可以发现所有标有‘ngModel’的子元素，并将其值添加到表单模型中创建FormGroup的实例，将数据存储在ngForm.value对象中。

b.当不希望Angular接管表单时，可以给表单标签添加“ngNoForm”指令。

c.会阻止表单的提交刷新，使用ngSubmit事件来提交；

 

ngModel作用：

a.ngModel是ngForm指令所在元素的子元素的字段，与name属性相关联（仅当添加name属性时才会捕获，创建数据模版

b.用来将联系的表单元素放置于一块，并组成对象格式数据，代码示例

1.指令来自FormsModule模块，app.module.ts中引入

 

import { FormsModule } from '@angular/forms'; 并声明 @NgModule({ declarations: [], imports: [FormsModule], providers: [], }) 2.html文件 angular表单处理 随笔 第1张 
 1 <form #myForm="ngForm" (ngSubmit)="creatUser(myForm.value)">   
 2         <!-- // #myForm="ngForm" 模板本地变量引入ngForm指令 -->
 3         <div>姓名：<input type="text" #myName="ngModel" ngModel name="myname"></div>       
 4         <div>邮箱：<input type="email" ngModel name="email"></div>
 5         <div>手机号：<input type="number" ngModel name="mobile"></div>
 6         <div ngModelGroup="passwordInfo">
 7             <div>密码：<input type="password" ngModel name="password"></div>
 8             <div>确认密码：<input type="password" ngModel name="passwordConfirm"></div>
 9         </div>
10         <button tyoe="submit">注册</button>
11     </form>
12     <!-- // 模板本地变量引入ngForm -->
13     <div>
14         {{myForm.value | json}} 
15     </div>
16     <!-- // 模板本地变量引入ngModel -->
17     <div>
18         {{myName
html 
createUser(info:any){
console.log(info);
}

二.响应式表单

使用响应式，必须引入FormsModule、ReactiveFormsModule这两模块

angular表单处理 随笔 第3张

 

 
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄