Блог

Главная - Вопросы по программированию - Свойство ‘controls’ не существует для типа ‘AbstractControl’ при запуске ng build —output-hashing=all —prod

Свойство ‘controls’ не существует для типа ‘AbstractControl’ при запуске ng build —output-hashing=all —prod

#javascript #angular #typescript #angular-forms #angular-validation

#javascript #угловой #машинопись #угловые формы #угловая проверка

Вопрос:

Свойство ‘controls’ не существует для типа ‘AbstractControl’ во время выполнения ng build --output-hashing=all --prod , однако, для ng build все работает нормально

У меня есть группа форм ниже

 export class TestCenterLocationStep2Component extends BaseFormComponent<any> implements OnInit {
    this.$form = this.fb.group({
          email: [this.step2.email || '', [Validators.required, Validators.email, Validators.pattern('^[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,4}$')]],
          phone: [this.step2.phone || ''],
          configuration: this.fb.group({
    
            sessionOpenDays: [this.step2.configuration.sessionOpenDays || '', Validators.required],
            sessionOpenHours: [this.step2.configuration.sessionOpenHours || '', Validators.required],
            sessionOpenMinutes: [this.step2.configuration.sessionOpenMinutes || '', Validators.required],
    
            sessionCloseDays: [this.step2.configuration.sessionCloseDays || '', Validators.required],
            sessionCloseHours: [this.step2.configuration.sessionCloseHours || '', Validators.required],
            sessionCloseMinutes: [this.step2.configuration.sessionCloseMinutes || '', Validators.required],
    
            applicationExpiryDays: [this.step2.configuration.applicationExpiryDays || '', Validators.required],
            applicationExpiryHours: [this.step2.configuration.applicationExpiryHours || '', Validators.required],
            applicationExpiryMinutes: [this.step2.configuration.applicationExpiryMinutes || '', Validators.required],
    
            paymentCloseDays: [this.step2.configuration.paymentCloseDays || '', Validators.required],
            paymentCloseHours: [this.step2.configuration.paymentCloseHours || '', Validators.required],
            paymentCloseMinutes: [this.step2.configuration.paymentCloseMinutes || '', Validators.required]
          })
        });
}

HTML

 <form [formGroup]="$form" (ngSubmit)="onFormSubmit()" *ngIf="$form" novalidate>
    <div class="mt-3" formGroupName="configuration">
        <div class="form-group row w-100 pr-5">
            <label for="sessionOpenDays"
                class="col-sm-5 col-form-label">Days</label>
            <div class="col-sm-7">
                <select class="form-control" id="sessionOpenDays"
                    formControlName="sessionOpenDays"
                    [class.is-invalid]="(!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; $form.controls.configuration.controls.sessionOpenDays.touched) || (!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; validate)">
                    <option value="" disabled></option>
                    <option *ngFor="let item of days" [ngValue]="item">{{item}}
                    </option>
                </select>
                <div class="invalid-feedback"
                    *ngIf="(!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; $form.controls.configuration.controls.sessionOpenDays.touched) || (!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; validate)">
                    Required</div>
            </div>
        </div>
    </div>
</form>

FormGroup

 export abstract class BaseFormComponent<T> {
  @Output() $form: FormGroup;
}

Получение исключения как

 src/app/testCentres/test-centre-locations/test-center-location-step2/test-center-location-step2.component.html(58,53): Property 'controls' does not exist on type 'AbstractControl'.

однако при выполнении команды ng build --output-hashing=all --prod для ng build все работает нормально

Комментарии:

1. На данный момент полное предположение. Что, если вы добавите после configuration: this.fb.group({ ... }) этого дополнительный тип: as FormGroup ?

2. @GytisTG нет, это не сработало

3. Как определяется this.$form (тип)?

4. Оно определено в другом абстрактном классе и расширяется основным классом. обновленный код, пожалуйста, посмотрите

5. Хм, не уверен… Я тестировал аналогичную вещь на своем локальном сервере, и, похоже, я не получаю эту ошибку. Я немного испытываю соблазн использовать any в качестве последнего измерения.

Ответ №1:

После изменения

 [class.is-invalid]="(!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; $form.controls.configuration.controls.sessionOpenDays.touched) || (!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; validate)"

<div class="invalid-feedback"
                    *ngIf="(!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; $form.controls.configuration.controls.sessionOpenDays.touched) || (!$form.controls.configuration.controls.sessionOpenDays.valid amp;amp; validate)">
                    Required</div>

Для

 [ngClass]="{'switchError': (!$form.get('configuration').get('idTypesAccepted').valid amp;amp; $form.get('configuration').get('idTypesAccepted').touched) || (!$form.get('configuration').get('idTypesAccepted').valid amp;amp; validate)}"


    <div class="text-danger" style="font-size: 12px;"
        *ngIf="(!$form.get('configuration').get('idTypesAccepted').valid amp;amp; $form.get('configuration').get('idTypesAccepted').touched) || (!$form.get('configuration').get('idTypesAccepted').valid amp;amp; validate)">
  At least one must be selected</div>