[英]Fetching Selected value from a dropdown list in Angular 8
我正在使用前端的 Angular 8 和后端的 Laravel 开发单页应用程序。 我有一个包含输入文本字段和下拉列表的表单。 文本输入字段上的值在打字稿文件中被很好地捕获,但在捕获从下拉列表中选择的值时遇到问题,以便我可以在后端提交..
~请帮忙?
创建.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>
创建.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() {
}
}
[(ngModel)]
指令似乎在您的select
元素上丢失。
将以下内容添加到<select>
[(ngModel)]="form.childGender"
同样为了一致性,将表单的键重命名为:
public form = {
childSurName: null,
childGender: null
};
这是一个相同的工作堆栈闪电战。 (请注意,提交时仅将表单记录到控制台)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.