Angular data12

表单处理

• 模板式表单
• 响应式表单
• 表单校验

模板式表单需要在app.module.ts中引入FormsModule;
响应式表单中需要在app.module.ts中引入ReactiveFormsModule;

image.png

模板式表单

• NgForm
• NgModel
• NgModelGroup

在form 标签中加 ngNoForm可以取消angular对表单的接管

代码样例：

//模板中

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <div>用户名：<input ngModel name="username" type="text"></div>
  <div>手机号：<input ngModel name="mobile" type="number"></div>

  <div ngModelGroup="passwordsGroup">
    <div>密码：<input ngModel name="password" type="password"></div>
    <div>确认密码：<input  ngModel name="pconfirm" type="password"></div>
  </div>

  <button type="submit">注册</button>
</form>

<div>
  {{myForm.value | json}}
</div>

<br>
<div>
  {{username.value}}
</div>

//组件中

onSubmit(item:any){
    console.log(item);
  }

响应式表单

• FormControl - 它是一个为单个表单控件提供支持的类，可用于跟踪控件的值和验证状态，此外还提供了一系列公共API。

使用示例：

ngOnInit() {
  this.myControl = new FormControl('Semlinker');
}

• FormGroup - 包含是一组 FormControl 实例，可用于跟踪 FormControl 组的值和验证状态，此外也提供了一系列公共API。

使用示例：

ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl('Semlinker'),
    location: new FormControl('China, CN')
  });
}

• FormArray - 包含是一组 FormControl 数组集合。

定义示例：

...
//FormControl
username:FormControl = new FormControl('aaa');

//FormControl
  formModel:FormGroup = new FormGroup({
    from:new FormControl(),
    to:new FormControl(),
  });

//FormArray
  emails:FormArray = new FormArray([
    new FormControl("a@a.com"),
    new FormControl("b@b.com"),
  ]);
...

用到的相关绑定指令

图中第二列指令是属性绑定
第三列指令是使用属性的模形来连接数据模型和DOM元素的

• 模板式表单是只能在模板中通过本地变量赋值来操作DOM
• 响应式表单是只能在代码中通过FormCtrol、FormGroup、FormArray对象来操作DOM
• name结尾的指令使用的时候不需要属性绑定的方括号，直接使用，值为属性的名字（类似字符串的赋值）；
• 另外使用name结尾的指令只能使用在formGroup指令的覆盖范围之内；
• formGroup和formControl指令不能互相嵌套；

实例1：

ng g component reactiveForm

在reactive-form.component.ts中

import { Component, OnInit } from '@angular/core';
import {FormArray, FormControl, FormGroup} from "@angular/forms";

@Component({
 selector: 'app-reactive-form',
 templateUrl: './reactive-form.component.html',
 styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

 formModel:FormGroup = new FormGroup({
   username:new FormControl(),
   dateRange:new FormGroup({
     from:new FormControl(),
     to:new FormControl(),
   }),
   emails: new FormArray([
     new FormControl("a@a.com"),
     new FormControl("b@b.com"),
   ]),
 });

 constructor() { }
 ngOnInit() {
 }

 onSubmit(){
   console.log(this.formModel.value)
 }
 addEmail(){
   let email = this.formModel.get('emails') as FormArray;
   email.push(new FormControl());
 }
}

在reactive-form.component.html中

<form [formGroup]="formModel" (submit)="onSubmit()">
  <input type="text" formControlName="username">
  <div formGroupName="dateRange">
    起始日期：<input type="date" formControlName="from">
    截止日期：<input type="date" formControlName="to">
  </div>
  <div>
    <ul formArrayName="emails">
      <li *ngFor="let e of this.formModel.get('emails').controls;let i=index;">
        <input type="text" [formControlName]="i">
      </li>
    </ul>
    <button type="button" (click)="addEmail()">增加Email</button>
  </div>
  <div>
    <button type="submit">保存</button>
  </div>
</form>

实例2：

ng g component reactiveRegist

实现代码：

在reactive-regist.component.html模板中

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名：<input type="text" formControlName="username"></div>
 <div>手机号：<input type="text" formControlName="mobile"></div>

  <div formGroupName="passwordsGroup">
    <div>密码：<input type="password" formControlName="password"></div>
    <div>重复密码：<input type="password" formControlName="pconfirm" ></div>
  </div>
  <button type="submit">提交</button>
</form>

在reactive-regist.component.ts�组件控制器中

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-react-regist',
  templateUrl: './react-regist.component.html',
  styleUrls: ['./react-regist.component.css']
})
export class ReactRegistComponent implements OnInit {
  formModel:FormGroup;
  constructor() {
    this.formModel = new FormGroup({
      username:new FormControl(),
      mobile:new FormControl(),
      passwordsGroup:new FormGroup({
        password:new FormControl(),
        pconfirm:new FormControl(),
      })
    });
  }
  onSubmit(){
    console.log(this.formModel.value);
  }
  ngOnInit() {
  }
}

FormBuilder用法

FormBuilder通过依赖注入可以精减代码量，同时可以传入参数实现检验；现在把上例的表单模型做重构；

...
export class ReactRegistComponent implements OnInit {
  formModel:FormGroup;
  constructor(fb:FormBuilder) {
    this.formModel = fb.group({
      username:[''],
      mobile:[''],
      passwordsGroup:fb.group({
        password:[''],
        pconfirm:[''],
      })
    });
  }
  onSubmit(){
    console.log(this.formModel.value);
  }
  ngOnInit() {
  }
}