类型 '{ [key: string]: AbstractControl; 上不存在属性 'xxxx' }'答案

【问题标题】：Property 'xxxx' does not exist on type '{ [key: string]: AbstractControl; }'类型 '{ [key: string]: AbstractControl; 上不存在属性 'xxxx' }'
【发布时间】：2017-08-21 08:22:32
【问题描述】：

import { FormGroup } from '@angular/forms';

export class MasterVendorFormContactComponent implements OnInit {
  @Input() formContactGroup: FormGroup;
// rest of the code 
}


<fieldset [formGroup]="formContactGroup" class="master-vendor-form-contact">
  <md-input-container class="master-vendor-form-contact__phone"
                      [dividerColor]="formContactGroup.controls.phone?.valid ? 'default' : 'warn'">
    <input mdInput placeholder="Enter phone" formControlName="phone">
    <md-hint align="end"
             *ngIf="!formContactGroup.controls.phone?.valid">
      Vendor phone number must be in (XXX) XXX-XXXX format
    </md-hint>
  </md-input-container>
  <!-- Rest of the code -->
</fieldset>

在使用 aot 编译此代码时，会出现以下错误：

angular_app/src/$$_gendir/app/master-vendors/master-vendor-form-contact/master-vendor-form-contact.component.ngfactory.ts (465,73): Property 'phone' does not exist on type '{ [key: string]: AbstractControl; }'.
angular_app/src/$$_gendir/app/master-vendors/master-vendor-form-contact/master-vendor-form-contact.component.ngfactory.ts (465,143): Property 'phone' does not exist on type '{ [key: string]: AbstractControl; }'.
angular_app/src/$$_gendir/app/master-vendors/master-vendor-form-contact/master-vendor-form-contact.component.ngfactory.ts (476,77): Property 'phone' does not exist on type '{ [key: string]: AbstractControl; }'.
angular_app/src/$$_gendir/app/master-vendors/master-vendor-form-contact/master-vendor-form-contact.component.ngfactory.ts (476,147): Property 'phone' does not exist on type '{ [key: string]: AbstractControl; }'.

我尝试了这种方法：

不要使用 form.controls.controlName，使用 form.get('controlName')

但这里我有 formContactGroup，所以它似乎不适合我。

【问题讨论】：

标签： angular typescript angular-components angular2-aot

【解决方案1】：

有两个选项，您可以更新到最新的打字稿版本。从version 2.2 开始，它们允许对具有字符串索引签名的类型使用点表示法。

或者您可以更改您的模板，这更有意义，因为这是正确的做法:) documentation:

<md-input-container [dividerColor]="formContactGroup.get('phone').valid ? 'default' : 'warn'">

【讨论】：