如何在编辑营地时显示从后端获取的图像路径

Question

我想在编辑时将文件路径显示为输入值

原因是当我点击编辑按钮时，营地的所有其他值（数据）都被放入输入字段，但营地的 url 没有放入输入字段

这是我的 camp.ts 文件

  form  = new FormGroup({
    title:new FormControl('',),
    images: new FormControl(''),
    location: new FormControl(''),
    price: new FormControl(''),
    description: new FormControl('')
 
    })
   public uploadFile(event: Event): void {
   const input = event.target as HTMLInputElement;
    if (!input.files?.length) {
     return;
   }
   const file = input.files[0];
   this.form.patchValue({
    images: file
   });
   this.form.get('images');
  }

  ngOnInit(): void {
   this.id = this.route.snapshot.params.id;
   this.getData();
  }
  get f(){
   return this.form.controls;
  }
  getData(){
    this.campgroundService.getDataById(this.id).subscribe(res => {
    this.data = res; 
    this.campground = this.data;
    this.form =  new FormGroup({
    title: new FormControl(this.campground.title, Validators.required),
    images: new FormControl(this.campground.images[0].url , Validators.required),
    location: new FormControl(this.campground.location, Validators.required),
    price: new FormControl(this.campground.price, Validators.required),
    description: new FormControl(this.campground.description, Validators.required)
    });
    console.log('Fetching Form Values from backend',this.form.value);
    console.log('file data = ', this.campground.images[0].url);
    });
   }

这是我的 camp.html 文件

<div class="form-group" >
    <label for="title"> Enter Title </label>
    <input type="text" formControlName="title" placeholder="Enter Title" [ngClass]="{'is-invalid':submitted && f.title.errors}" class="form-control">
    <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
        <div *ngIf="f.title.errors.required">
            Title Is Required!
        </div>
    </div>
</div>
<!-- Image Input -->
<div class="form-group">
    <label for="image"> Selcet Image </label>
    <input type="file" name="images" id="image" (change)="uploadFile($event)" class="form-control" accept="image/x-png,image/gif,image/jpeg"/>
</div>

Answer 1

您需要将 formControlName="images" 添加到第二个输入：

    <input
       class="form-control"
       formControlName="images"
       type="file"
       name="images"
       id="image"
       (change)="uploadFile($event)" 
       accept="image/x-png,image/gif,image/jpeg"
    >

顺便说一句，如果您在代码的开头使用验证器进行表单初始化可能会更好。 然后，当您获得数据响应时，您只需更新字段的值，而无需为它们重新创建表单控件。

类似的东西：

form  = new FormGroup({
    title:new FormControl('', Validators.required),
    images: new FormControl('', Validators.required),
    location: new FormControl('', Validators.required),
    price: new FormControl('', Validators.required),
    description: new FormControl('', Validators.required) 
    })

...

getData(){
    this.campgroundService.getDataById(this.id)
    .subscribe(
       res => {
          this.data = res; 
          this.campground = this.data;
          this.form.patchValue({
             title: this.campground.title,
             images: this.campground.images[0].url,
             location: this.campground.location,
             price: this.campground.price,
             description: this.campground.description,
          });
 
    console.log('Fetching Form Values from backend',this.form.value);
    console.log('file data = ', this.campground.images[0].url);
    });
   }