Angular 6: How to set default value in 'Select' dropdown using formControlName?

I am learning MEAN stack with Angular 6. How can we select default value in select dropdown using formcontrolname?
I am updating a form i need a default value in my dropdown list but i am getting a blank.

here is the ts file.

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

          <!--                        <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>

i want to set default value in client, car, driver select option.

asked Dec 28 '18 at 17:52

sneha_h

add a comment |

here is the ts file.

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

          <!--                        <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>

i want to set default value in client, car, driver select option.

asked Dec 28 '18 at 17:52

sneha_h

add a comment |

here is the ts file.

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

          <!--                        <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>

i want to set default value in client, car, driver select option.

asked Dec 28 '18 at 17:52

sneha_h

here is the ts file.

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

          <!--                        <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>

i want to set default value in client, car, driver select option.

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();

    }

}

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();

    }

}

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

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

node.js mongodb express angular6 mean-stack

asked Dec 28 '18 at 17:52

sneha_h

asked Dec 28 '18 at 17:52

sneha_h

asked Dec 28 '18 at 17:52

sneha_h

asked Dec 28 '18 at 17:52

sneha_h

asked Dec 28 '18 at 17:52

sneha_h

add a comment |

1 Answer
1

active

oldest

votes

Use [ngValue] attribute in your select element. Check this documentation.

<select class="form-control" [ngValue]="car" formControlName="carname" required>

    <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>

</select>

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

Getting an error ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

used this solution and getting the current name but not its value <select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}"> <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}} </option> </select>

– sneha_h
Jan 7 at 11:26

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962430%2fangular-6-how-to-set-default-value-in-select-dropdown-using-formcontrolname%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Use [ngValue] attribute in your select element. Check this documentation.

<select class="form-control" [ngValue]="car" formControlName="carname" required>

    <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>

</select>

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

Getting an error ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

used this solution and getting the current name but not its value <select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}"> <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}} </option> </select>

– sneha_h
Jan 7 at 11:26

add a comment |

Use [ngValue] attribute in your select element. Check this documentation.

<select class="form-control" [ngValue]="car" formControlName="carname" required>

    <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>

</select>

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

Getting an error ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

used this solution and getting the current name but not its value <select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}"> <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}} </option> </select>

– sneha_h
Jan 7 at 11:26

add a comment |

Use [ngValue] attribute in your select element. Check this documentation.

<select class="form-control" [ngValue]="car" formControlName="carname" required>

    <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>

</select>

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

Use [ngValue] attribute in your select element. Check this documentation.

<select class="form-control" [ngValue]="car" formControlName="carname" required>

    <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}</option>

</select>

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

answered Dec 28 '18 at 18:18

westdabestdb

1,221316

Getting an error ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

used this solution and getting the current name but not its value <select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}"> <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}} </option> </select>

– sneha_h
Jan 7 at 11:26

add a comment |

Getting an error ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

used this solution and getting the current name but not its value <select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}"> <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}} </option> </select>

– sneha_h
Jan 7 at 11:26

Getting an error

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

Getting an error

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngValue' since it isn't a known property of 'select'. ("value="" type="text" formControlName="carname">-->

– sneha_h
Dec 29 '18 at 10:10

used this solution and getting the current name but not its value

<select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}">                           <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}                         </option>                          </select>

– sneha_h
Jan 7 at 11:26

used this solution and getting the current name but not its value

<select class="form-control" formControlName="carname" required (change)="ChangingValue($event)" value="{{defaultCar._id}}">                           <option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}                         </option>                          </select>

– sneha_h
Jan 7 at 11:26

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk