I am upgrading an Angular project from version 10 to 17. During the transition from Angular 10 to Angular 14, I encountered several errors Like in the following function:
<code>addPropertyDetails() {
let form = this.fb.group({
id: [''],
plot: this._form.addDropDownFormGroup(),
property: this._form.addDropDownFormGroup(),
type: [''],
isAllChecked: [false],
validFrom: [''],
validTo: [''],
totalValue: [''],
totalConsumption: [''],
units: this.fb.array([])
});
form.valueChanges.subscribe(response => {
let total = 0;
let consumptionTotal = 0;
let minDate: any = "";
let maxDate: any = "";
(form.get('units').value as any[]).forEach(elem => {
if (elem.isChecked) {
total += (parseFloat(elem.value)) ? parseFloat(elem.value) : 0;
consumptionTotal += (parseFloat(elem.totalCalculation)) ? parseFloat(elem.totalCalculation) : 0;
}
if (!this._serv.checkForNull(elem.validFrom)) {
let elemDate = new Date(elem.validFrom);
if (minDate == "") {
minDate = elemDate;
} else if (minDate > elemDate) {
minDate = elemDate;
}
}
if (!this._serv.checkForNull(elem.validTo)) {
let elemDate = new Date(elem.validTo);
if (maxDate == "") {
maxDate = elemDate;
} else if (maxDate < elemDate) {
maxDate = elemDate;
}
}
});
form.get('totalValue').setValue(total, { emitEvent: false });
form.get('totalConsumption').setValue(consumptionTotal, { emitEvent: false });
form.get('validFrom').setValue(minDate, { emitEvent: false });
form.get('validTo').setValue(maxDate, { emitEvent: false });
});
return form;
}
</code>
<code>addPropertyDetails() {
let form = this.fb.group({
id: [''],
plot: this._form.addDropDownFormGroup(),
property: this._form.addDropDownFormGroup(),
type: [''],
isAllChecked: [false],
validFrom: [''],
validTo: [''],
totalValue: [''],
totalConsumption: [''],
units: this.fb.array([])
});
form.valueChanges.subscribe(response => {
let total = 0;
let consumptionTotal = 0;
let minDate: any = "";
let maxDate: any = "";
(form.get('units').value as any[]).forEach(elem => {
if (elem.isChecked) {
total += (parseFloat(elem.value)) ? parseFloat(elem.value) : 0;
consumptionTotal += (parseFloat(elem.totalCalculation)) ? parseFloat(elem.totalCalculation) : 0;
}
if (!this._serv.checkForNull(elem.validFrom)) {
let elemDate = new Date(elem.validFrom);
if (minDate == "") {
minDate = elemDate;
} else if (minDate > elemDate) {
minDate = elemDate;
}
}
if (!this._serv.checkForNull(elem.validTo)) {
let elemDate = new Date(elem.validTo);
if (maxDate == "") {
maxDate = elemDate;
} else if (maxDate < elemDate) {
maxDate = elemDate;
}
}
});
form.get('totalValue').setValue(total, { emitEvent: false });
form.get('totalConsumption').setValue(consumptionTotal, { emitEvent: false });
form.get('validFrom').setValue(minDate, { emitEvent: false });
form.get('validTo').setValue(maxDate, { emitEvent: false });
});
return form;
}
</code>
addPropertyDetails() {
let form = this.fb.group({
id: [''],
plot: this._form.addDropDownFormGroup(),
property: this._form.addDropDownFormGroup(),
type: [''],
isAllChecked: [false],
validFrom: [''],
validTo: [''],
totalValue: [''],
totalConsumption: [''],
units: this.fb.array([])
});
form.valueChanges.subscribe(response => {
let total = 0;
let consumptionTotal = 0;
let minDate: any = "";
let maxDate: any = "";
(form.get('units').value as any[]).forEach(elem => {
if (elem.isChecked) {
total += (parseFloat(elem.value)) ? parseFloat(elem.value) : 0;
consumptionTotal += (parseFloat(elem.totalCalculation)) ? parseFloat(elem.totalCalculation) : 0;
}
if (!this._serv.checkForNull(elem.validFrom)) {
let elemDate = new Date(elem.validFrom);
if (minDate == "") {
minDate = elemDate;
} else if (minDate > elemDate) {
minDate = elemDate;
}
}
if (!this._serv.checkForNull(elem.validTo)) {
let elemDate = new Date(elem.validTo);
if (maxDate == "") {
maxDate = elemDate;
} else if (maxDate < elemDate) {
maxDate = elemDate;
}
}
});
form.get('totalValue').setValue(total, { emitEvent: false });
form.get('totalConsumption').setValue(consumptionTotal, { emitEvent: false });
form.get('validFrom').setValue(minDate, { emitEvent: false });
form.get('validTo').setValue(maxDate, { emitEvent: false });
});
return form;
}
I am encountering the following TypeScript errors:
Property 'isChecked' does not exist on type 'unknown'.
Property 'value' does not exist on type 'unknown'.
Property 'totalCalculation' does not exist on type 'unknown'.
Property 'validTo' does not exist on type 'unknown'.
Argument of type 'number' is not assignable to parameter of type 'string'.
I believe these errors are due to the stricter type checking in newer Angular versions. How can I resolve these issues?