Свойство 'controls' не существует для типа 'AbstractControl'. Угловой 7

Question

Я получаю ту же ошибку сборки при запуске ng build -aot
Ошибка сборки говорит о том, что Свойство 'controls' не существует для типа 'AbstractControl'.

Моя форма выглядит так component.ts

И HTML выглядит так component.html

Answer 1

Это много цепочек!

FromGroup имеет атрибут вида controls: { [key: string]: AbstractControl; }. Это означает, что в вашем HTML, когда вы пишете createUserForm.controls.password, компилятор AOT понимает, что это объект типа AbstractControl, который, в свою очередь, не объявляет атрибут с именем controls !

В данный момент компилятор не может понять, что ваша группа password является действительной FormGroup - все, что он понимает, это то, что это AbstractControl (который может быть элементом управления, группой или массивом). ). Чтобы показать компилятору AOT, что password фактически является группой, вы можете объявить вспомогательный метод получения в файле компонента:

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>