Данные setValue не отображаются в полях формы, когда я редактирую элемент списка - PullRequest
Новая
       12

Данные setValue не отображаются в полях формы, когда я редактирую элемент списка

0 голосов
/ 28 января 2019

У меня есть список элементов в моем проекте.Добавление элементов и обновление элементов работают нормально.Я хочу отобразить данные элемента в полях формы на странице редактирования элемента.

Вот мой код Typescript: 

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

Вот мой код .html 

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

Вот скриншот моего браузера.Пожалуйста, посмотрите

screen2

Данные элемента отображаются в консоли с console.log(), но я не могу отобразить их в форме.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

«портной» - это не массив, это объект, вы не можете получить доступ к его свойствам, как вы, попробуйте вместо этого: 

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

})
0 голосов
/ 28 января 2019

Я думаю, это потому, что проблема с синхронизацией. Потому что вы получаете файл с сервера. Вы должны использовать как это: 

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

    })

РЕДАКТИРОВАТЬ: Я думаю, вы должны попробовать вот такsetVAlue как в официальном документе. 

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

    }

        })
...