微客导航 » 文章资讯 » Angular4编程之表单响应功能示例

Angular4编程之表单响应功能示例

2023-09-19 12:28:05 170

本文实例讲述了Angular4表单响应功能。分享给大家供大家参考，具体如下：

响应式表单

1、响应式表单需要在appmodule文件中注入响应式表单模块

import{FormsModule,ReactiveFormsModule}from'@angular/forms'；

@NgModule(
{imports:[FormsModule,ReactiveFormsModule……]
……}

2、form.component.ts组件当中引用

第一种方式:

import{Component}from'@angular/core';
import{FormGroup,FormControl,FormBuilder}from'@angular/forms';
@Component({
templateUrl:'forms.component.html'
})
exportclassFormsComponent{
formModel:FormGroup;
constructor(fb:FormBuilder){
this.formModel=fb.group({
formControl1:[''],
formControl2:[''],
……
});
}
onSubmit(){
console.log(this.formModel.value);
}
}

第二种方式:

import{Component}from'@angular/core';
import{FormGroup,FormControl}from'@angular/forms';
@Component({
templateUrl:'forms.component.html'
})
exportclassFormsComponent{
formModel:FormGroup;/*这里定义表单变量名，HTML文件中绑定时使用*/
constructor(){
this.formModel=newFormGroup({
formControl1:newFormControl(),
formControl2:newFormControl(),
……
});
}
onSubmit(){
console.log(this.formModel.value);
}
}

3、对应的HTML文件





formControl1

formControl2

至此，一份简单的响应式表单就完成了

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Angular4编程之表单响应功能示例

热门推荐

随机推荐