Angular ReactiveForms（响应式表单）中的value和getRawValue()的区别

Angular中极好的一点就是表单，使用ReactiveForms可以方便快捷的进行表单验证。

最近遇到一个bug，会员卡请假，可填写请假天数（days）或设置假期截止日期（endAt），但只有一个可编辑，另一个为disabled状态，并且days改变自动计算endAt，设置endAt自动计算days。

定义一个表单：

import {FormBuilder, FormGroup, Validators} from '@angular/forms'

constructor(private fb: FormBuilder) {
  this.daysForm = fb.group({
    days: ['', Validators.compose([Validators.required, aliValidators.number])],
    endAt: ['', Validators.required],
    remark: [''],
    daysType: ['numb'],             // 输入天数 or 选择日期
  })
}

提交表单时需要取出表单中的数据，一般来说，this.daysForm.value和this.daysForm.getRawValue()均可，并且取出的值是相同的。

但某次此功能通过设置endAt，并自动计算days提交时，使用this.daysForm.value，无论如何都取不出value中的days值，界面显示正确

值取不到

debug时发现daysForm这个FormGroup的value属性中确实无days这个字段

后来尝试使用this.daysForm.getRawValue()取值，取到了正确的days，且days FormControl的status = 'DISABLED'，但是value = 16存储正确


由此可见，

• 当一个FormControl（days）为禁用状态且手动改变它的值时 this.daysForm.patchValue({days: 16})，改变的仅仅是此FormControl的value，并不能改变FormGroup（daysForm）的value中days的值。
• this.daysForm.value取得是FormGroup（daysForm）的value属性，返回一个对象；
  this.daysForm.getRawValue()会遍历FormGroup（daysForm）的controls属性，返回每一个FormControl中的value；即

const value = {}, {controls} = this.daysForm
for (const key in controls) {
  if (key) {
    value[key] = controls[key].value
  }
}

this.daysForm.getRawValue() = value	// object中的值相等