I am currently facing an issue with a form (heat index calculator) that requires 2 inputs - a dropdown and a button. The button is disabled when there are no inputs or if the inputs are invalid. Everything works correctly, except for the fact that even when I enter valid arguments in both inputs, the button remains disabled until I click out of the input field. Is there a way to enable the button as soon as I enter a valid argument without having to click out of the input field? Another similar issue arises when I select Celsius or Fahrenheit options in the dropdown. When I choose Celsius and type in a value like 50, then change my mind and switch to Fahrenheit, the validation error doesn't appear unless I delete the value and re-enter it.
This is the HTML code:
<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 class="validation-error" *ngIf="temperatureValidationFahrenheit">Temperature must be 80°F or higher!</div>
<div class="validation-error" *ngIf="temperatureValidationCelsius" >Temperature must be 26°C or higher!</div>
</div>
<p-dropdown
class="form-control"
[style]="{'height':'51px', 'paddingTop': '5px', 'marginLeft': '5px'}"
formControlName="selectedTemp"
(onChange)="selectionChanged()" [options]="temps"
optionLabel="units"></p-dropdown>
</label>
<label class="humidity-row">
<p class="humidity-input">Relative Humidity</p>
<div [style]="{'position': 'relative'}" class="field col-12 md:col-4">
<p-inputNumber [style]="{'height': '51px'}" mode="decimal"formControlName="humidity" class="form-control"></p-inputNumber>
<div class="percent">%</div>
<div class="validation-error" *ngIf="heatIndexForm.controls['humidity'].invalid">Humidity must be 0% - 100%</div>
</div>
</label>
<div class="buttons">
<button
class="form-control"
[disabled]="disableCalculateButton"
pButton
label="Calculate"></button>
<p-button label="Reset" (onClick)="reset()"></p-button>
</div>
</form>
And here is the TypeScript code for the form:
export class HeatIndexComponent implements OnInit {
haveResult: boolean = false;
temps: Temperature[];
heatIndexForm: FormGroup;
constructor(
private heatIndexService: HeatIndexService,
private localStore: LocalService
) {
this.temps = [
new Temperature('Celsius', 'C'),
new Temperature('Fahreheit', 'F'),
];
}
// More code goes here...
I attempted to solve the button issue using template-driven approach but encountered the same problem.