Angular data12

表单处理

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

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

image.png

模板式表单

• NgForm
• NgModel
• NgModelGroup

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

代码样例：

//模板中


  
用户名：
  
手机号：

  

    
密码：
    
确认密码：
  

  注册



  {{myForm.value | json}}





  {{username.value}}


//组件中

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("[email protected]"),
    new FormControl("[email protected]"),
  ]);
...

用到的相关绑定指令

图中第二列指令是属性绑定
第三列指令是使用属性的模形来连接数据模型和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("[email protected]"),
     new FormControl("[email protected]"),
   ]),
 });

 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中

  
  

    起始日期：
    截止日期：
  
  

    

      

        
      
    
    增加Email
  
  

    保存
  

实例2：

ng g component reactiveRegist

实现代码：

在reactive-regist.component.html模板中

  
用户名：
 
手机号：

  

    
密码：
    
重复密码：
  
  提交

在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() {
  }
}