Hellom's Studio.

angular7 之 响应式表单

angular
字数统计: 775阅读时长: 4 min
2020/04/14 Share

响应式表单

依赖注入 ReactiveFormsModule

1
2
3
4
5
6
7
8
9
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ],
})
export class AppModule { }

view 层绑定定义好的表单控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- edit.html -->
  <div *ngFor="let item of getFormArray();index as i" [formGroup]="form.get(['list', i])">
      <div class="add-item">
        <div class="add-line">
          <div class="add-title">
            <img src="assets/imgs/del.png" alt="">
            {{item.get('title').value}}
          </div>

          <div class="add-money">{{ item.get('zongjine').value }} 元</div>
        </div>
        <div class="add-line">
          <div><span>*</span>全筑承担</div>
          <div>
            <input nz-input placeholder="请输入金额" type="number" name="" id="" formControlName="qzcd">
          </div>
        </div>
        <div class="add-line">
          <div><span>*</span>班组承担</div>
          <div> <input nz-input placeholder="请输入金额" type="number" name="" id="" formControlName="bzcd"></div>
        </div>
        <div class="add-line">
          <div><span>*</span>劳务承担</div>
          <div> <input nz-input placeholder="请输入金额" type="number" name="" id="" formControlName="lwcd"></div>
        </div>
        <div class="add-line">
          <div><span>*</span>保险承担</div>
          <div> <input nz-input placeholder="请输入金额" type="number" name="" id="" formControlName="bxcd"></div>
        </div>
      </div>

      <div class="line-grey"></div>
    </div>

生成并导入新的表单控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// edit.page.ts

// 引入表单模块
import {
  FormBuilder,
  FormGroup,
  Validators,
  FormArray,
  FormControl,
} from '@angular/forms'


public fb = new FormBuilder()
public form: FormGroup = this.fb.group({
    all: [''],
    list: this.fb.array([]),
    beizhu: [''],
    status: [''],
})

// 添加后新增一个 FormGroup
public addItem = (title, id) => {
    this.title = title
    const formArray: FormArray = this.form.get('list') as FormArray
    const formGroup: FormGroup = this.fb.group({
      ID: [id],
      title: [title],
      zongjine: [0, Validators.required],
      qzcd: [0, Validators.required],
      bzcd: [0, Validators.required],
      lwcd: [0, Validators.required],
      bxcd: [0, Validators.required],
    })
    formArray.push(formGroup)

    this.formValueChange()
}

  // 计算每条费用的总金额
public getItemTotal = () => {
    const formArray: FormArray = this.form.get('list') as FormArray
    if (formArray.controls.length) {
      formArray.controls.map((group: FormGroup) => {
        const insuranceOrder: FormControl = group.get('bxcd') as FormControl
        const laborOrder: FormControl = group.get('lwcd') as FormControl
        const qzOrder: FormControl = group.get('qzcd') as FormControl
        const teamOrder: FormControl = group.get('bzcd') as FormControl
        const total: FormControl = group.get('zongjine') as FormControl
        const sum: number = (
          insuranceOrder.value +
          laborOrder.value +
          qzOrder.value +
          teamOrder.value).toPrecision(4)
        total.setValue(sum)
      })
    }
}

// 结算合计金额
public getAllTotal = (formArray: FormArray, formControlName: string) => {
    let sum: number = 0
    if (formArray.controls.length) {
      formArray.controls.map((group: FormGroup) => {
        const formControl: FormControl = group.get(
          formControlName
        ) as FormControl
        sum += formControl.value
      })
    }

    switch (formControlName) {
      case 'bxcd':
        this.all.bxcd = sum
        break
      case 'lwcd':
        this.all.lwcd = sum
        break
      case 'qzcd':
        this.all.qzcd = sum
        break
      case 'bzcd':
        this.all.bzcd = sum
        break
      case 'zongjine':
        this.all.total = sum
        break
      default:
        break
    }
}

  // 监听订阅表单变化
public formValueChange = () => {
    // 整个表单订阅
    // this.form.valueChanges.subscribe((res) => {})

    const formArray: FormArray = this.form.get('list') as FormArray
    if (formArray.controls.length) {
      formArray.controls.map((group: FormGroup) => {
        const insuranceOrder: FormControl = group.get('bxcd') as FormControl
        const laborOrder: FormControl = group.get('lwcd') as FormControl
        const qzOrder: FormControl = group.get('qzcd') as FormControl
        const teamOrder: FormControl = group.get('bzcd') as FormControl
        const total: FormControl = group.get('zongjine') as FormControl
        // 单个控件订阅
        insuranceOrder.valueChanges.subscribe(() => {
          this.getItemTotal()
          this.getAllTotal(formArray, 'bxcd')
        })
        laborOrder.valueChanges.subscribe(() => {
          this.getItemTotal()
          this.getAllTotal(formArray, 'lwcd')
        })
        qzOrder.valueChanges.subscribe(() => {
          this.getItemTotal()
          this.getAllTotal(formArray, 'qzcd')
        })
        teamOrder.valueChanges.subscribe(() => {
          this.getItemTotal()
          this.getAllTotal(formArray, 'bzcd')
        })
        total.valueChanges.subscribe(() => {
          this.getAllTotal(formArray, 'zongjine')
        })
      })
    }
}
CATALOG
  1. 1. 响应式表单
    1. 1.1. 依赖注入 ReactiveFormsModule
    2. 1.2. view 层绑定定义好的表单控件
    3. 1.3. 生成并导入新的表单控件
Total : 43
2020
2019
angular7 TypeScript ES6 css dart VsCode 面向对象 数据类型 flutter 布局 枚举 image_picker ionic3 极光推送 angular hexo blog ionic4 Express Node mongodb 企业微信 微信小程序 scroll-view scss chrome node 正则表达式 JavaScript vue pdf.js
angular7 TypeScript css TypeScript/ES6 dart flutter ionic3 angular ionic4 Express mongodb 企业微信 微信小程序 scss chrome node 正则表达式 JavaScript vue