能否通过解构赋值简化Angular表单变量声明代码？

你之前的写法问题出在没搞清楚解构的层级——this.phaseOneForm.controls本身并没有直接的value属性，value是每个子控件（比如identification_type）的属性。所以得用嵌套解构深入到每个控件内部去取value。

正确的写法应该是这样：

const {
  identification_type: { value: identification_type },
  identification_number: { value: identification_number },
  date_of_issue: { value: date_of_issue },
  date_of_birth: { value: date_of_birth },
  pep: { value: pep },
  us: { value: us },
  qualified_investor: { value: qualified_investor },
} = this.phaseOneForm.controls;

简单解释下这个逻辑：

• 先从controls对象里提取对应的子控件（比如identification_type）
• 再从这个子控件对象中取出value属性，同时把它重命名为我们需要的变量名（这里和控件名保持一致，方便后续使用）

如果你觉得上面的写法有点重复，也可以用一个小技巧先批量提取控件，再批量获取value，不过这种写法行数减少有限，仅供参考：

const {
  identification_type,
  identification_number,
  date_of_issue,
  date_of_birth,
  pep,
  us,
  qualified_investor
} = this.phaseOneForm.controls;

const [identification_type, identification_number, date_of_issue, date_of_birth, pep, us, qualified_investor] = [
  identification_type.value,
  identification_number.value,
  date_of_issue.value,
  date_of_birth.value,
  pep.value,
  us.value,
  qualified_investor.value
];

不过第一种嵌套解构的写法是最直接、最贴合你需求的，能有效砍掉重复的代码行数。

内容的提问来源于stack exchange，提问作者sword