I have the following dropdown select in my HTML and I am currently retrieving the text content of the selected option. How can I access the value attribute instead?
Here is the dropdown select:
<form [formGroup]="angForm" class="form-inline my-5 my-lg-0">
<div class="post-emojy">
<select #emoji class="textboxclass" type="text" placeholder="Emojy" aria-label="Post" formControlName="emoji" required>
<option value="" disabled selected>š</option>
<option value="angry" style="background-image:url(./src/assets/emoticons/png/angry.png);">angry</option>
<option value="bored" style="background-image:url(~assets/emoticons/png/bored.png);">bored</option>
<option value="confused" style="background-image:url(~assets/emoticons/png/confused.png);">confused</option>
<option value="embarrassed" style="background-image:url(~assets/emoticons/png/embarrassed.png);">embarrassed</option>
<option value="happy" style="background-image:url(~assets/emoticons/png/happy.png);">happy</option>
<option value="kissing" style="background-image:url(~assets/emoticons/png/kissing.png);">kissing</option>
<option value="unhappy" style="background-image:url(~assets/emoticons/png/unhappy.png);">unhappy</option>
<option value="sad">sad</option>
</select>
</div>
</form>
Below is the method that fetches the value:
angForm: FormGroup;
constructor(
private postService: PostServiceService,
private fb: FormBuilder
) {
this.createForm();
}
postMood(): void {
const emoji = this.angForm.get("emoji").value;
const text = this.angForm.get("postText").value;
this.postService.postMoods(emoji, text);
// Call to reset the form values
this.angForm.get("postText").reset();
function delay(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
(async () => {
await delay(300);
location.reload();
})();
}