我正在学习Angular 6中的MEAN堆栈。如何使用select在formcontrolname下拉列表中选择默认值？
我正在更新表单，但我的下拉列表中需要一个默认值，但是我得到的是空白。
这是ts文件。
export class EditBookingComponent implements OnInit {
public currentBooking: IBooking;
bookingid: any;
updateBookingForm: FormGroup;
cars: any;
drivers: any;
clients: any;
constructor(private fb: FormBuilder,
private bookingService: BookingService,
private toastr: ToastrService,
private router: Router,
private carService: CarService,
private driverService: DriverService,
private clientService: ClientService,
private route: ActivatedRoute,
public dialogRef: MatDialogRef<EditBookingComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.bookingid = data.id;
this.updateBookingForm = this.fb.group ({
'clientname' : new FormControl(""),
'bookingdate' : new FormControl(""),
'fromcity' : new FormControl(""),
'tocity' : new FormControl(""),
'pickupdate' : new FormControl(""),
'returndate' : new FormControl(""),
'carname' : new FormControl(""),
'drivername' : new FormControl("")
});
}
ngOnInit() {
this.getOneBooking(this.bookingid);
this.getAllCars();
this.getAllDrivers();
this.getAllClients();
}
getAllCars(){
this.carService.getCars().subscribe((res) => {
this.cars = res;
}, err => {
console.log(err);
});
}
getAllDrivers(){
this.driverService.getDrivers().subscribe((res) => {
this.drivers = res;
}, err => {
console.log(err);
});
}
getAllClients(){
this.clientService.getClients().subscribe((res) => {
this.clients = res;
}, err => {
console.log(err);
});
}
getOneBooking(id){
this.bookingService.getBooking(id).subscribe((res) => {
this.currentBooking = res;
this.populateForm(this.currentBooking);
}, err => {
console.log(err);
});
}
populateForm(data): void {
this.updateBookingForm.patchValue({
clientname : data.clientName.clientName,
bookingdate : data.bookingDate,
fromcity : data.fromCity,
tocity : data.toCity,
pickupdate : data.pickupDate,
returndate : data.returnDate,
carname : data.car.carName,
drivername : data.driver.driverName
});
}
editBooking(formdata:any){
let theForm = this.updateBookingForm.value;
this.bookingService.editBooking(this.bookingid, theForm).subscribe((res) => {
if (res.success === false) {
this.toastr.error(res.message);
} else {
this.toastr.success(res.message);
this.router.navigate(['/admin/booking']);
this.dialogRef.close();
}
this.updateBookingForm.reset();
});
}
close() {
this.dialogRef.close();
}
}
。
html文件
<form class="well form-horizontal" [formGroup]="updateBookingForm" (ngSubmit)="editBooking(updateBookingForm.value)">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Booking Id</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span><strong>{{bookingid}}</strong></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Client Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<!-- <input id="fullName" name="clientname" placeholder="Client Name" class="form-control" required="true" value="" type="text" formControlName="clientname">-->
<select class="form-control" formControlName="clientname" required>
<option *ngFor="let client of clients" value="{{client._id}}">{{client.clientName}}
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Booking Date</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input id="bookingDate" name="bookingdate" placeholder="Booking Date" class="form-control" required="true" value="" type="text" formControlName="bookingdate"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">From</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-upload"></i></span><input id="fromCity" name="fromcity" placeholder="From City" class="form-control" required="true" value="" type="text" formControlName="fromcity"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">To</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-download"></i></span><input id="toCity" name="tocity" placeholder="To City" class="form-control" required="true" value="" type="text" formControlName="tocity"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PickUp Date</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input id="pickupDate" name="pickupdate" placeholder="Pickup Date" class="form-control" required="true" value="" type="text" formControlName="pickupdate"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Return Date</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input id="returnDate" name="returndate" placeholder="Return Date" class="form-control" required="true" value="" type="text" formControlName="returndate"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Car</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="fas fa-car-side"></i></span>
<select class="form-control" formControlName="carname" required>
<option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Driver</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="fas fa-address-card"></i></span>
<select class="form-control" formControlName="drivername" required>
<option *ngFor="let driver of drivers" value="{{driver._id}}">{{driver.driverName}}
</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12 controls">
<input class="btn btn-success" mat-raised-button (click)="dialogRef.close()" type="submit" value="Update Booking" />
</div>
</fieldset>
</form>
我想在客户端，汽车，驾驶员选择选项中设置默认值。
答案 0 :(得分：0)
在选择元素中使用[ngValue]属性。选中this documentation。
<select class="form-control" [ngValue]="car" formControlName="carname" required>
<option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>
</select>