I'm currently facing an issue with getting ng-selected to function properly. Initially, I attempted to simply add selected in the option tag, but later discovered that I should be using ng-select. Despite trying variations such as ng-selected="true" and ng-selected="selected", none have been successful. I've also explored recommendations from other stackoverflow posts without finding a solution. Interestingly, the feature did work at one point (in another HTML form where I encountered the same problem), but suddenly stopped.
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">Caloric Intake Recommendation</div>
<div class="panel-body">
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label for="weight" class="col-lg-2 col-form-label">Weight</label>
<div class="col-lg-10">
<input
type="number"
class="form-control"
id="weight"
formControlName="weight"
placeholder="Weight">
</div>
</div>
<div class="form-group row">
<label for="goal" class="col-lg-2 col-form-label">Goal</label>
<div class="col-lg-10">
<select class="form-control" formControlName="goal" id="goal">
<option ng-selected="selected">Lose Weight</option>
<option>Maintain Weight</option>
<option>Gain Mass</option>
</select>
</div>
</div>
<button
class="btn btn-primary"
type="submit"
[disabled]="!myForm.valid">Submit
</button>
<hr>
<div class="col-sm-4">
<label class="col-sm-2 col-form-label">Your Recommended Protein:</label>
<input type="text" value={{this.protein}}>
</div>
<div class="col-sm-4">
<label class="col-sm-2 col-form-label">Your Recommended Carbs:</label>
<input type="text" value={{this.carbs}}>
</div>
<div class="col-sm-4">
<label class="col-sm-2 col-form-label">Your Recommended Fats:</label>
<input type="text" value={{this.fat}}>
</div>
</form>
</div>
</div>
</div>
Component
import {Component} from "@angular/core";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {CaloricIntakeClass} from "./caloric-intake.class";
@Component({
selector: 'app-caloric-intake',
templateUrl: './caloric-intake.component.html',
styleUrls: ['./caloric-intake.component.css']
})
export class CaloricIntakeComponent{
myForm: FormGroup;
caloricIntake: CaloricIntakeClass;
weight: number;
goal: string;
protein: number;
carbs: number;
fat: number;
onSubmit() {
this.weight = this.myForm.value.weight;
this.goal = this.myForm.value.goal;
this.myForm.reset();
this.caloricIntake = new CaloricIntakeClass(this.weight);
if (this.goal === 'Cutting'){
this.caloricIntake.cuttingIntake();
} else if (this.goal === 'Bulking'){
this.caloricIntake.bulkingIntake();
} else {
this.caloricIntake.maintaingIntake();
}
this.protein = this.caloricIntake.getProtein();
this.carbs = this.caloricIntake.getCarbs();
this.fat = this.caloricIntake.getFat();
}
ngOnInit() {
this.myForm = new FormGroup({
weight: new FormControl(null, Validators.required),
goal: new FormControl(null, Validators.required)
});
}
}