I have a page with a form that contains select menus. The “To” menu is dependent upon what is selected in the “From” menu. Can someone please help figure out why my form is not resetting correctly. I am at a loss. Also, if anyone has a better way to accomplish what I an doing with my form, I am all ears. Thanks.
Html File:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="converterForm" (ngSubmit)="convert(converterForm.value)">
<ion-item>
<ion-label>Fuel Grade</ion-label>
<ion-select formControlName="fuelGrade" [(ngModel)]="selectedFuelGrade">
<ion-option *ngFor="let grade of fuelGradeSet" value="{{grade}}">{{grade}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-input formControlName="valueToConvert" name="valueToConvert" type="number" placeholder="Value To Convert"></ion-input>
</ion-item>
<ion-item>
<ion-label>From</ion-label>
<ion-select formControlName="convertFrom" [(ngModel)]="selectedConvertFrom" (ionChange)="convertFromChange()">
<ion-option *ngFor="let weight of convertFromSet" value="{{weight}}">{{weight}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>To</ion-label>
<ion-select formControlName="convertTo" [(ngModel)]="selectedConvertTo">
<ion-option *ngFor="let weight of convertToSet" value="{{weight}}">{{weight}}</ion-option>
</ion-select>
</ion-item>
<button ion-button block [disabled]="!converterForm.valid">Convert</button>
</form>
<button ion-button block [disabled]="!converterForm.valid" color="light" (click)="resetConverter()">Reset</button>
<ion-label>{{convertedValue}}</ion-label>
</ion-content>
TS file:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
converterForm: FormGroup;
converterData: any;
fuelGradeSet: Array<string>;
convertFromSet: Array<string>;
convertToSet: Array<string> = [];
selectedFuelGrade: string;
selectedConvertFrom: string;
selectedConvertTo: string;
convertedValue: any;
constructor(public navCtrl: NavController,
public builder: FormBuilder) {
this.fuelGradeSet = ['JP-4', 'JP-5', 'JP-8', 'Jet A', 'Jet A-1', 'Jet B', 'TS1', '100/100LL'];
this.convertFromSet = ['Gallons', 'Liters', 'Pounds', 'Kilograms'];
this.convertToSet.push('Pounds');
this.convertToSet.push('Liters');
this.convertToSet.push('Kilograms');
this.convertedValue = '';
this.converterForm = builder.group({
fuelGrade: this.selectedFuelGrade = 'Jet A',
valueToConvert: ['', Validators.required],
convertFrom: this.selectedConvertFrom = 'Gallons',
convertTo: this.selectedConvertTo = 'Pounds'
});
}
convertFromChange() {
switch (this.selectedConvertFrom) {
case this.selectedConvertFrom = 'Liters':
this.convertToSet = [];
this.convertToSet.push('Pounds');
this.convertToSet.push('Gallons');
this.convertToSet.push('Kilograms');
this.selectedConvertTo = 'Pounds';
break;
case this.selectedConvertFrom = 'Pounds':
this.convertToSet = [];
this.convertToSet.push('Gallons');
this.convertToSet.push('Liters');
this.convertToSet.push('Kilograms');
this.selectedConvertTo = 'Gallons';
break;
case this.selectedConvertFrom = 'Kilograms':
this.convertToSet = [];
this.convertToSet.push('Gallons');
this.convertToSet.push('Liters');
this.convertToSet.push('Pounds');
this.selectedConvertTo = 'Gallons';
break;
default:
this.selectedFuelGrade = 'Jet A';
this.selectedConvertFrom = 'Gallons';
this.convertToSet = [];
this.convertToSet.push('Pounds');
this.convertToSet.push('Liters');
this.convertToSet.push('Kilograms');
this.selectedConvertTo = 'Pounds';
break;
}
}
convert(formData) {
this.converterData = formData;
console.log(this.converterData);
this.convertedValue = 'This is a test';
}
resetConverter() {
this.converterForm.reset();
this.selectedFuelGrade = 'Jet A';
this.selectedConvertFrom = 'Gallons';
this.convertToSet = [];
this.convertToSet.push('Pounds');
this.convertToSet.push('Liters');
this.convertToSet.push('Kilgrams');
this.selectedConvertTo = 'Pounds';
this.convertedValue = '';
}
}