Angular 2 构建 --prod 失败 "Property 'controls' does not exist on type 'AbstractControl'"

Question

在下面的代码中 this.fb 是 FormBuilder 实例

return this.fb.group({
  name: ['', [<any>Validators.required]],
  phone: ['', [<any>Validators.required]],
  email: ['', [<any>Validators.required, Validators.email]],
  website: ['', [<any>Validators.pattern(web_pattern)]]
  tax_code: ['', [<any>Validators.required,Validators.maxLength(50)]],

  owner: this.fb.group({
    first_name: ['', [<any>Validators.required, Validators.maxLength(30)]],
    last_name: ['', [<any>Validators.required, Validators.maxLength(30)]],
    phone: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, Validators.email]],
    password: ['', [<any>Validators.required]],
  })

});

在使用 ng build --prod 构建此代码时，它失败说明：属性 'controls' 在类型 'AbstractControl' 上不存在. owner 键有问题，它是 FormGroup 实例，而不是 FormControl。然而，根据 angular 文档，在 FormGroup.

中添加 FormGroup 是有效的

此代码在没有 --prod 的情况下也能完美构建。我知道 --prod 会导致严格的类型检查。我无法理解如何更正此问题。

Answer 1

在您的表单控件中的某些地方，您必须使用类似这样的东西

form.get('qualifications').controls

或form.controls.qualifications.controls.degree或 form.controls.qualifications['controls'].degree 这不 aot 友好。

你需要把它放在组件而不是模板里面像这样。

模板

 <div class="col-md-12" *ngFor = "let address of getAddresses(user) ; let i = index">

组件

  getAddresses(form){
    return form.get('addresses').controls;
  }

一个working aot example of the same and code

Angular 2 构建 --prod 失败 "Property 'controls' does not exist on type 'AbstractControl'"

Angular 2 build --prod fails "Property 'controls' does not exist on type 'AbstractControl'"

typescript2.0

angular