i am learning reactive forms in angular and i am building heat index calculator that takes temperature input and humidity input and it calculates feels like temperature. From dropdown user can choose either celsius or fahrenheit. It cant be calculated for temperatures lower than 26 celsius or 80fahrenheit. Right now the validation only works if user has selected celsius and input number lower than 26 the error shows but not when fahrenheit selected. Any help appreciated
this is html
<form [formGroup]="heatIndexForm" class="wrapper" (ngSubmit)="onSubmit()">
<label class="temperature-row">
<p class="temperature-input">Air Temperature</p>
<div class="field col-12 md:col-4">
<p-inputNumber
[style]="{'height': '51px'}"
formControlName="temperature"
mode="decimal"
class="form-control">
</p-inputNumber>
<div *ngIf="heatIndexForm.get('selectedTemp').value.code === 'C' && !heatIndexForm.get('temperature').valid" >Temperature must be above 26°C</div>
</div>
<p-dropdown
class="form-control"
[style]="{'height':'51px', 'paddingTop': '5px', 'marginLeft': '5px'}"
formControlName="selectedTemp"
(onChange)="reset();" [options]="temps"
optionLabel="units"></p-dropdown>
</label>
<div class="humidity-row">
<p class="humidity-input">Relative Humidity</p>
<p-inputNumber mode="decimal"formControlName="humidity" class="form-control"></p-inputNumber>
<p class="percent">%</p>
</div>
<div class="buttons">
<button
class="form-control"
[disabled]="(!heatIndexForm.get('temperature').valid || !heatIndexForm.get('humidity').valid)"
pButton
label="Calculate"></button>
<p-button label="Reset" (onClick)="reset()"></p-button>
</div>
</form>
this is ts
export class HeatIndexComponent implements OnInit {
haveResult: boolean = false;
temps: Temperature[];
selectedTemp: Temperature;
heatIndexForm: FormGroup;
constructor(private heatIndexService: HeatIndexService) {
this.temps = [
{
units: 'Celsius',
code: 'C',
},
{
units: 'Fahrenheit',
code: 'F',
},
];
}
ngOnInit(): void {
this.heatIndexForm = new FormGroup({
temperature: new FormControl(null, Validators.min(26)),
humidity: new FormControl(null, Validators.max(100)),
selectedTemp: new FormControl({ code: 'C' }),
result: new FormControl(''),
resultComment: new FormControl(''),
});
}
calculateHeatIndex() {
const temperature = this.heatIndexForm.get('temperature').value;
const humidity = this.heatIndexForm.get('humidity').value;
this.haveResult = true;
if (this.heatIndexForm.get('selectedTemp').value.code === 'C') {
this.heatIndexForm
.get('result')
.setValue(
this.heatIndexService.calculateHeatIndexInCelsius(
temperature,
humidity
)
);
this.heatIndexForm
.get('resultComment')
.setValue(
this.heatIndexService.determineCommentWhenInCelsius(
this.heatIndexForm.get('result').value
)
);
} else {
this.heatIndexForm
.get('result')
.setValue(
this.heatIndexService.calculateHeatIndexInFahrenheit(
temperature,
humidity
)
);
this.heatIndexForm
.get('resultComment')
.setValue(
this.heatIndexService.determineCommentWhenInFahrenheit(
this.heatIndexForm.get('result').value
)
);
}
}
reset() {
this.haveResult = false;
this.heatIndexForm.get('temperature').reset();
this.heatIndexForm.get('humidity').reset();
}
onSubmit() {
this.calculateHeatIndex();
}
}
i tried adding this to html but didnt work
<div *ngIf="heatIndexForm.get('selectedTemp').value.code === 'F' && !heatIndexForm.get('temperature').valid" >Temperature must be above 80°F</div>