setValue data not showing in form fields, When i edit a list item

Question

I have a list of item in my project. Adding items and updating items are working fine. I want to display the item data in form fields in the edit-item page.

Here is my Typescript code:

    export class EditTailorComponent implements OnInit {
  userToken: string;
  edit_id: any;
  tailor: Array<any> = [];

  constructor(private fb: FormBuilder, private https: HttpClient, private router: Router) {
    this.userToken = localStorage.getItem('credentials');
    this.edit_id = localStorage.getItem('edit_id');
   this.formValue();

  }
  editTailorForm = new FormGroup({
    name:new FormControl(),
    phone_number: new FormControl(),

 });

  ngOnInit() {
    const data = {
      tailor_id: this.edit_id,
      user: this.userToken
    };
    this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
      this.tailor=response.tailor;
      console.log(this.tailor);
      this.editTailorForm.controls['name'].setValue(this.tailor[0].name);
      this.editTailorForm.controls['phone_number'].setValue(this.tailor[0].phone_number);

    })
  }


  submitdata() {
    const data = {
      tailor_id: this.edit_id,
      name: this.editTailorForm.value.name,
      phone_number: this.editTailorForm.value.phone_number,
      user: this.userToken
    };

    this.https.post<any>('api/tailor/update', data).subscribe(
      response => {
        if (response.response_code === 200) {
          this.router.navigate(['list-tailor']);
        }
      },
      error => {
        console.log(error.error);
      }
    );
  }

Here is my .html code

<div class="container">
  <mat-card>
      <form [formGroup]="editTailorForm">
         <div class="col1">
            <div class="form-group">
                <mat-form-field>
                    <input matInput placeholder="Name" formControlName="name" >
                </mat-form-field>
            </div>
          </div>
         <div  class="col2">      
            <div class="form-group">
                <mat-form-field>
                    <input matInput placeholder="Contact Number" formControlName="phone_number" >
                </mat-form-field>
            </div>
        </div>   
          <div class="form-group">
              <button  mat-raised-button color="primary" (click)="submitdata()">edit Tailor</button>
         </div>
      </form>
  </mat-card>
</div>

Here is my browser screenshot. Please take a look

The item data is displayed in the console with console.log() but I can't display it in the form.

Answer 1

"tailor" isn't an array, it's an object, you can't access its properties like you did, try this instead:

ngOnInit() {
const data = {
   tailor_id: this.edit_id,
   user: this.userToken
};
 this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
  this.tailor=response.tailor;
  console.log(this.tailor);
  this.editTailorForm.controls['name'].setValue(this.tailor.name);
  this.editTailorForm.controls['phone_number'].setValue(this.tailor.phone_number);

})