角6：如何使用formControlName在“選擇”下拉列表中設置默認值？

Question

我正在學習Angular 6中的MEAN堆棧。如何使用formcontrolname在select下拉列表中選擇默認值？ 我正在更新表單，我的下拉列表中需要一個默認值，但是我得到的是空白。

這是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> 

我想在客戶端，汽車，駕駛員選擇選項中設置默認值。

Answer 1

在您的選擇元素中使用[ngValue]屬性。 檢查此文檔 。

<select class="form-control" [ngValue]="car" formControlName="carname" required>
    <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>
</select>