Property 'controls' does not exist on type 'AbstractControl' while running ng build --output-hashing=all --prod
however, for the ng build
everything works fine
I have the below form group
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 && $form.controls.configuration.controls.sessionOpenDays.touched) || (!$form.controls.configuration.controls.sessionOpenDays.valid && 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 && $form.controls.configuration.controls.sessionOpenDays.touched) || (!$form.controls.configuration.controls.sessionOpenDays.valid && validate)">
Required</div>
</div>
</div>
</div>
</form>
FormGroup
export abstract class BaseFormComponent<T> {
@Output() $form: FormGroup;
}
Getting an exception as
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'.
while running the command ng build --output-hashing=all --prod
, however, for the ng build everything works fine
After changing
To