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.

Welcome on SO. I just edited your question, to make it more readable and hopefully answerable. I hope you don't mind and wish you a good journey on SO. — Puka
– Puka, Commented Jan 28, 2019 at 12:31

JoH · Accepted Answer · 2019-01-28 12:25:56Z

2

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

})

answered Jan 28, 2019 at 12:25

JoH

5641 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aBnormaLz Over a year ago

How do you know it's not an array?

JoH Over a year ago

He did a screenshot of the web console which shows that his tailor variable is an object.

aBnormaLz Over a year ago

oh he added that after i saw the question

Harry · Accepted Answer · 2019-01-29 09:36:39Z

1

I think it is because a sync problem.Because you get file from server.You must use like this :

    ngOnInit() {
    const data = {
      tailor_id: this.edit_id,
      user: this.userToken
    };
    this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
    ///You must check if response is ok/ready so use If conditional
    if (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);
}

    })

EDIT: I thin you must try like this for setVAlue how in official doc.

 ngOnInit() {
        const data = {
          tailor_id: this.edit_id,
          user: this.userToken
        };
        this.https.post<any>('api/tailor/details',data).subscribe((response)=>{
        ///You must check if response is ok/ready so use If conditional
        if (response) {
          this.tailor=response.tailor;
          console.log(this.tailor);
          this.editTailorForm.setValue({
           name: this.tailor.name
           phone_number: this.tailor.phone_number
          });

    }

        })

edited Jan 29, 2019 at 9:36

Harry

1332 silver badges11 bronze badges

answered Jan 28, 2019 at 12:23

Anton Skybun

1,6591 gold badge11 silver badges22 bronze badges

1 Comment

Anton Skybun Over a year ago

Hi bro! Check my EDIT

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related