从Angular 8的下拉列表中获取选定的值 [英] Fetching Selected value from a dropdown list in Angular 8
问题描述
Am使用前端的Angular 8和后端的Laravel在单页应用程序上工作.我有一个具有输入文本字段和下拉列表的表单.文本输入字段上的值已在打字稿文件上很好地捕获,但是捕获从下拉列表中选择的值时出现问题,这样我就可以在后端提交了.
Am working on a Single Page Application using Angular 8 on the frontend and Laravel on the backend. I have got a form which has input text field and a dropdown list. The values on the text input fields are being captured well on the typescript file but am having a problem capturing the value selected from the drop down list so that I can submit on the backend..
〜请协助?
Create.component.html
<form #createForm=ngForm (ngSubmit)="onSubmit()">
<div class="form-group row">
<div class="col-sm-6">
<label for="formGroupExampleInput">Child SurName</label>
<input
type="text"
name="childSurName"
class="form-control"
id="childSurName"
placeholder="ChildSurName"
[(ngModel)]="form.childSurName">
</div>
<div class="col-sm-6">
<label for="child-gender">Child Gender</label>
<select class="form-control" id="childGender" name="child-gender" required>
<option value="" selected disabled> Child's Gender</option>
<option value="Male"> Male</option>
<option value="Female"> Female </option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-lg btn-success btn-block"
[disabled]="!createForm.valid">Save Details </button>
</div>
</div>
</form>
Create.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/Services/auth.service';
import { Router } from '@angular/router';
import { AuthCheckService } from 'src/app/Services/auth-check.service';
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
public form = {
childSurName: null,
child-gender: null
};
public error = null;
constructor(
private Auth:AuthService,
private router: Router,
private AuthCheck : AuthCheckService)
{ }
//Submit form data to the backend via a function in he service file
onSubmit(){
this.Auth.submitFormData(this.form).subscribe(
data => console.log(data),
error => console.log(error)
);
}
ngOnInit() {
}
}
推荐答案
将以下内容添加到< select>
[(ngModel)]="form.childGender"
为了保持一致性,还可以将表单的键重命名为:
Also for consistency rename the key of your form to:
public form = {
childSurName: null,
childGender: null
};
以下是同样有效的 stackblitz .(请注意,在提交时,仅将表单记录到控制台)
Here's a working stackblitz for the same. (Note that on submit only the form is being logged to the console)
这篇关于从Angular 8的下拉列表中获取选定的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!