我的Angular总结:建议使用FormGroup.controls 来访问子表单控件

在 Angular 中,我们至少有两种方法可以访问子表单控件:FormGroup.get('controlPath')FormGroup.controls.controlPath。到目前为止,为了类型安全,我选择使用后者。

考虑到下面的代码:

ts 复制代码
@Component({
  selector: 'app-root',
  templateUrl: './app/playground.component.html',
  imports: [FormsModule, ReactiveFormsModule],
})
export class PlaygroundComponent {
  formGroup = this.formBuilder.group({
    booker: new FormControl('123', {validators: [Validators.required]}),
    bookNames: this.formBuilder.array<string>([]),
    bookerConf: this.formBuilder.group({language: ''})
  });
  constructor(private formBuilder: FormBuilder) {
    const bookerFromControl = this.formGroup.controls.booker; // FormControl<string | null>
    const bookerFromGetPath = this.formGroup.get('booker'); // AbstractControl<string | null, string | null> | null
    const bookerFromGetPaths = this.formGroup.get(['booker']); // AbstractControl<any, any> | null
    const bookerFromGetPathsWithConst = this.formGroup.get(['booker'] as const); // AbstractControl<string | null, string | null> | null
    
    const bookNameFromControls = this.formGroup.controls.bookNames; // FormArray<FormControl<string | null>>
    const bookNamesFromPath = this.formGroup.get('bookNames'); // AbstractControl<(string | null)[], (string | null)[]> | null
    const bookNamesFromPaths = this.formGroup.get(['bookNames']); // AbstractControl<any, any> | null
    const bookNamesFromPathsWithConst = this.formGroup.get(['bookNames'] as const); // AbstractControl<(string | null)[], (string | null)[]> | null
  }
}

如你所见,formGroup.get 至少有两个问题

  • 无法识别是否存在 booker 字段,因此 bookerFromGetPath 的类型可能是 null

    • 当键入错误的表单控件名称时,例如 formGroup.get('booker1'),不会有任何错误提示。
    • 同样,当你想要利用 VSCode 的重构功能对 booker 字段名称进行批量修改时,formGroup.get('booker') 并不会被自动改掉。
    • 使用路径数组参数时类型变得更糟,如 formGroup.get(['booker'])。但对于这种情况,我们可以使用as const,例如formGroup.get(['booker'] as const)来改善这种情况。
  • bookerFromGetPath 返回了错误的类型,AbstractControl 而不是 FormControl

    • 这不是一个大问题,因为 AbstractControl 类似于 FormControl
    • 但是对于 bookNameFromControlsFormArrayAbstractControl 之间的差异很大。

有一个开放的问题 严格类型的 FormGroup 应该有严格类型的 "get" 访问器 在2024年11月16日提出。

截至2025年4月20日,这个问题仍未解决,而且该问题只关注了我们发现的第一个问题。

不管怎样,这就是我选择的原因。

相关推荐
lizhongxuan6 小时前
Claude Code 防上下文爆炸:源码级深度解析
前端·后端
柳杉7 小时前
震惊!字符串还能这么玩!
前端·javascript
是上好佳佳佳呀8 小时前
【前端(五)】CSS 知识梳理:浮动与定位
前端·css
wefly20178 小时前
纯前端架构深度解析:jsontop.cn,JSON 格式化与全栈开发效率平台
java·前端·python·架构·正则表达式·json·php
云原生指北9 小时前
测试文章 #95 — 平台发布验证(51CTO/OSCHINA/Juejin)
angular.js
我命由我1234510 小时前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
自由生长202410 小时前
IndexedDB的观察
前端
IT_陈寒11 小时前
Vite热更新坑了我三天,原来配置要这么写
前端·人工智能·后端
斯班奇的好朋友阿法法11 小时前
离线ollama导入Qwen3.5-9B.Q8_0.gguf模型
开发语言·前端·javascript
掘金一周11 小时前
每月固定续订,但是token根本不够用,掘友们有无算力焦虑啊 | 沸点周刊 4.2
前端·aigc·openai