I cannot get ng-selected to work. I first tried just adding selected in the option tag, but after reading it seems like I need to use ng-select. I've tried doing ng-selected="true" and ng-selected="selected" with no luck. I've tried doing the recommended fixes from other stackeoverflow questions but none seem to work for me. At one point (in another html form bc I am having this same problem) it seemed to work, but now it magically 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)
});
}
}
In your template, your option's ng-selected is bound to a variable called 'selected'. That means in your component, you need to set this variable to true at the beginning, something like this:
export class CaloricIntakeComponent{
selected : boolean;
......
ngOnInit() {
this.selected = true;
......
}
}
Make sure you have values in the options, like this:
<select class="form-control" formControlName="goal" id="goal">
<option value="lose_weight">Lose Weight</option>
<option value="maintain_weight">Maintain Weight</option>
<option value="gain_mass">Gain Mass</option>
</select>
Then, you do not need ng-selected at all. You can just initiate with your custom values in the component.
ngOnInit() {
this.myForm = new FormGroup({
weight: new FormControl(null, Validators.required),
goal: new FormControl("lose_weight", Validators.required)
});
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加