Angular FormGroup set value from API database

Question

hello everyone i got problem when show value in angular forms from database API, i have data from identity login employeeNumber and after that data from identity was automatic create to my api Employee, after that i want get that api to my forms booking, there is form employeeNumber,name, and function.

this is my image was i get value this is my code component.ts

  public ngOnInit(): void {

    //from uis
    this.getDataFromUIS = this.employeeService.get();
    // this.bookingvehicleForm.patchValue(this.employeeMemberService.getUserLogin(this.getDataFromUIS.employeeNumber));
    this.tampung3 = this.employeeMemberService.getUserLogin(this.getDataFromUIS.employeeNumber)
    .subscribe(s => {
      this.employeModelTransaction = s;
    });
    console.log(this.getDataFromUIS);
    console.log(this.tampung3);
    this.buildForm();
  }

  // Set variable form
  private buildForm(): void {
    let bookingDate: any;
    if (this.bookingvehicle.bookingDate != null) {
      bookingDate = this.dateconverter.DateToDTP(new Date(this.bookingvehicle.bookingDate));
    }
    else {
      bookingDate = this.dateconverter.DateToDTP(new Date());
    }
    let startPeriodeBooking: any = this.dateconverter.DateToDTP(new Date(this.bookingvehicle.startPeriodeBooking));
    let endPeriodeBooking: any = this.dateconverter.DateToDTP(new Date(this.bookingvehicle.endPeriodeBooking));
    let startHoursOfDeparture: any = this.dateconverter.TimeToTP(new Date(this.bookingvehicle.startHoursOfDeparture));
    let endHoursOfDeparture: any = this.dateconverter.TimeToTP(new Date(this.bookingvehicle.endHoursOfDeparture));

    this.bookingvehicleForm = this.fb.group({
      'id': [this.bookingvehicle.id],
      'employee': [this.tampung3.employeeNumber, Validators.compose([Validators.required, Validators.maxLength(55)])],
      'name': [this.tampung3.name, Validators.compose([Validators.required, Validators.maxLength(30)])],
      'function' : [this.tampung3.function],
      //'function': [this.bookingvehicleForm.controls['function'].value.employee.function],
      'bookingDate': [bookingDate, Validators.compose([Validators.required, Validators.maxLength(30)])],
      'startPeriodeBooking': [startPeriodeBooking, Validators.compose([Validators.required, Validators.maxLength(20)])],
      'endPeriodeBooking': [endPeriodeBooking, Validators.compose([Validators.required, Validators.maxLength(20)])],
      'destination': [this.bookingvehicle.destination, Validators.compose([Validators.required, Validators.maxLength(30)])],
      'passenger': [this.bookingvehicle.passenger],
      'reason': [this.bookingvehicle.reason, Validators.compose([Validators.required, Validators.maxLength(50)])],
      'driveMode': [this.bookingvehicle.driveMode, Validators.compose([Validators.required, Validators.maxLength(20)])],
      'startHoursOfDeparture': [startHoursOfDeparture],
      'endHoursOfDeparture': [endHoursOfDeparture],
    });
    console.log(this.bookingvehicleForm);
  };

why when i get from service the value was subcription? my problem is i cannot get value from service and show the value to my form

please help:)

public getUserLogin(employeeNumber: string){ 
   console.log(this.employeeMemberURL + 
   this.config.ApiEndPoint.master.Employee + "getUserLogin"+ "/" + employeeNumber);
   return this.http.get(this.employeeMemberURL + this.config.ApiEndPoint.master.Employee + "getUserLogin"+ "/" + employeeNumber)
                   .map(res => Helper.bufferToJSON(res)); 
}

'public getUserLogin(employeeNumber: string){ console.log(this.employeeMemberURL + this.config.ApiEndPoint.master.Employee + "getUserLogin"+ "/" + employeeNumber); return this.http.get(this.employeeMemberURL + this.config.ApiEndPoint.master.Employee + "getUserLogin"+ "/" + employeeNumber) .map(res => Helper.bufferToJSON(res)); }' — T M

firegloves firegloves · Accepted Answer · 2018-11-08T10:07:43

You are requesting data and you are assigning the returning of subscribe() method to this.tampung3 with this instruction

this.tampung3 = this.employeeMemberService.getUserLogin(this.getDataFromUIS.employeeNumber)
    .subscribe(s => {
      this.employeModelTransaction = s;
    });

But I think you want only data, so you should not manage subscribe() return type. You are assigning remote fetched data to this.employeModelTransaction with this statement:

this.employeModelTransaction = s;

And then you are never reading it. So I think you should do something like this:

this.employeeMemberService.getUserLogin(this.getDataFromUIS.employeeNumber)
        .subscribe(s => {
          this.tampung3 = s;
        });

Angular FormGroup set value from API database

1 Answers