如何使用formControlName从Angular 6中提供的对象中选择/绑定下拉列表中的默认值?

时间:2019-01-04 11:40:21

标签: node.js express angular6 mean-stack

我想在下拉列表中设置默认值,但是它显示为空白,然后在选项列表中显示默认值。 如何在其中显示默认值?

我正在制作(学习)MEAN(Angular 6)应用程序。

这是我的ts file

export class EditBookingComponent implements OnInit {

    public currentBooking: IBooking;

    bookingid: any;
    updateBookingForm: FormGroup;
    cars: any;
    drivers: any;
    clients: any;
    defaultClient: any;
    defaultCar: any;
    defaultClientValue: 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.defaultCar = res.car;
          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 File

<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>
          <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 value="{{defaultCar._id}}" selected>{{defaultCar.carName}}</option>
            <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>

由于我使用的是反应形式,因此我如何使用formControlName绑定默认值。我曾尝试使用[ngModel], [value],但无法正常工作。 默认值为空白

这是我得到的输出。

car dropdown

car dropdown list

我的下拉列表中有两辆车(tavera,ertiga)。并且this(ertiga)中的默认值也在列表中。我想在显示和列表的其余选项中设置默认值(ertiga)。

我们该如何设置?

0 个答案:

没有答案