類型“ AbstractControl”上不存在屬性“控件”。 角度7

Question

當我運行ng build -aot時，我不斷收到相同的構建錯誤
生成錯誤表明屬性'controls'在類型'AbstractControl'上不存在。

我的表格看起來像這個component.ts

HTML看起來像這個component.html

Answer 1

鏈接很多！

FromGroup具有controls: { [key: string]: AbstractControl; }形式的屬性controls: { [key: string]: AbstractControl; } controls: { [key: string]: AbstractControl; } 。 這意味着，在您的HTML中，當您編寫createUserForm.controls.password ，AOT編譯器將其理解為AbstractControl類型的對象，而該對象又未聲明名為controls的屬性！

目前，編譯器無法理解您的password組是一個實際的FormGroup它所了解的只是它是一個AbstractControl （可以是控件，組或數組）。 為了向AOT編譯器顯示該password實際上是一個組，您可以在組件文件中聲明一個幫助程序getter：

get passwordGroup(): FormGroup { return this.createUserForm.controls.password as FormGroup; }

然后您可以轉到HTML文件並正確找到子控件：

<app-validation-messages [control]="passwordGroup.controls.password" ></app-validation-messages>

綜上所述，我個人不喜歡使用嵌套的組和控件。 相反，您可以使您的app-validation-messages組件實現ControlValueAccessor接口，並使其提供NG_VALUE_ACCESSOR令牌。 這樣，您就可以使用formGroupName和formControlName指令控制值：

<div formGroupName="password">
  <app-validation-messages formControlName="password"></app-validation-messages>
</div>