如何在ReactivForms中从FormControl返回图片名称

在ReactiveForms中，要从FormControl返回图片名称，可以通过以下步骤完成：

首先，在组件的模板中，使用<input type="file">元素创建一个文件上传输入框，用于选择图片文件。
在组件的类中，创建一个FormControl对象，用于接收用户选择的图片文件。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-image-upload',
  template: `
    <input type="file" (change)="onFileChange($event)">
  `
})
export class ImageUploadComponent {
  imageControl: FormControl = new FormControl();

  onFileChange(event: Event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.imageControl.setValue(file ? file.name : '');
  }
}

在上面的示例中，通过使用onFileChange方法，在用户选择文件后获取文件名，并将其设置为FormControl的值。

最后，可以通过订阅FormControl的值变化来获取图片名称。

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-image-upload',
  template: `
    <input type="file" (change)="onFileChange($event)">
    <p>Image Name: {{ imageControl.value }}</p>
  `
})
export class ImageUploadComponent implements OnInit {
  imageControl: FormControl = new FormControl();

  ngOnInit() {
    this.imageControl.valueChanges.subscribe((value) => {
      console.log('Image Name:', value);
    });
  }

  onFileChange(event: Event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.imageControl.setValue(file ? file.name : '');
  }
}

在上面的示例中，通过订阅FormControl的valueChanges事件，可以实时获取图片名称，并在模板中显示出来。

这样，就可以在ReactiveForms中从FormControl返回图片名称。关于ReactiveForms的更多信息，可以查看Angular官方文档中的相关内容：Reactive Forms。