(十六)、Angular4.0 响应式表单

向右看齐 2022-05-28 11:18 256阅读 0赞

一、在demo4项目中新建reactiveForm组件

  1. ng g component reactiveForm

二、3种api

  1. // FromControl 相当于一个普通对象
  2.   username: FormControl = new FormControl('aaa');
  4.   // FormGroup 存放key:value形式的数据
  5.   formModel: FormGroup = new FormGroup({
  6.     from: new FormControl(),
  7.     to: new FormControl()
  8.   });
  10.   // FormArray 相当于数组
  11.   emails: FormArray = new FormArray([
  12.     new FormControl('a@a.com'),
  13.     new FormControl('b@b.com'),
  14.   ]);

三、reactive-form.component.ts

  • 定义一个FormGroup(java中的Map)，用来接收表单的所有数据 
  1. formModel: FormGroup = new FormGroup({
  2.     dateRange: new FormGroup({
  3.       from: new FormControl(),
  4.       to: new FormControl()
  5.     }),
  6.     emails: new FormArray([
  7.       new FormControl('a@a.com'),
  8.       new FormControl('b@b.com')
  9.     ])
  10.   });

  • addEmail()往数组里面添加一个空的FormControl

    addEmail() {

    1. const emails = this.formModel.get('emails') as FormArray;
    2. emails.push(new FormControl());

    }

  • onSubmit()提交表单触发的方法，把表单数据打印到控制台 

  1. onSubmit() {
  2.     console.log(this.formModel.value);
  3.   }

四、reactive-form.component.html (对应reactive-form.component.ts自行参悟)

  • 用到了formGroupName、formConrolName、formArrayName关键字，相当于数据的双向绑定，对应绑定FormGroup、FormControl、FormArray



    起始日期:
    截止日期:












五、app.component.html中使用reactiveForm组件

  1. <app-reactive-form></app-reactive-form>

六、启动项目，访问测试localhost:4200

七、表单重构

八、新建reactiveRegist组件

  1. ng g component reactiveRegist

九、reactive-regist.component.ts中编写表单注册的数据结构

  1. formModel: FormGroup;
  3.   constructor() {
  4.     this.formModel = new FormGroup({
  5.       username: new FormControl(),
  6.       mobile  : new FormControl(),
  7.       passwordsGroup: new FormGroup({
  8.         password: new FormControl(),
  9.         pConfirm: new FormControl()
  10.       })
  11.     });
  12.   }
  14.   onSubmit() {
  15.     console.log(this.formModel.value);
  16.   }

十、reactive-regist.component.html 

  1. <form [formGroup]="formModel" (submit)="onSubmit()">
  2.   <div>用户名：<input type="text" formControlName="username"></div>
  3.   <div>手机号：<input type="text" formControlName="mobile"></div>
  4.   <div formGroupName="passwordsGroup">
  5.     <div>密码：<input type="password" formControlName="password"></div>
  6.     <div>确认密码：<input type="password" formControlName="pConfirm"></div>
  7.   </div>
  8.   <button type="submit">提交</button>
  9. </form>

十一、template-form.component.html展示reactive-regist组件，启动项目，访问测试localhost:4200

十二、用FormBuilder来简化reactive-regist.component.ts中的数据结构

  • fb.group({})替代new FormGroup，并且可以额外传多一个参数fb.group({},校验group)

  • [‘’,校验control,异步校验control] 替代new FormControl

    constructor(fb: FormBuilder) {

    1. this.formModel = fb.group({
    2.   username: [''],
    3.   mobile  : [''],
    4.   passwordsGroup: fb.group({
    5.     password: [''],
    6.     pConfirm: ['']
    7.   })
    8. });

    }

十三、启动项目，访问测试localhost:4200

发表评论

表情：
评论列表 （有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Angular2响应式表单

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面。 [原文地址。][Link 1] 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件。

    缺乏、安全感缺乏、安全感/ 0 赞/ 253 阅读

    相关 angular7+ngzorro响应式表单验证

    使用响应式表单在开发的过程中，经常会用到。使用响应式表单的不仅能够提高开发效率，并且还能有效减少冗余的代码，在表单校验的时候也更方面，并且结合ngzorro进行表单校验效果更完

    小咪咪小咪咪/ 0 赞/ 542 阅读