angular - 如果数据库具有角度值，我如何使图像不需要？

Question

我需要文件输入来选择个人资料图像。我还展示了它的预览图像。如果数据库没有设置配置文件并且未选择文件，则默认图像将在预览图像上看到，否则选择/数据库图像。

现在我也必须验证个人资料图像。如果未设置配置文件，则会看到所需的错误。如果设置，则在提交时不应看到所需的错误。如果设置了个人资料图像并且用户想要更改个人资料，则应将新的个人资料图像发送到数据库。

如果数据库有价值，我如何制作不需要的个人资料图像？我需要告诉如果图像有数据库值，然后在用户未选择新配置文件并且选择新配置文件发送的情况下将其视为原样。我无法在 patchValue 或其他方面找到我需要做的解决方案。

请指导和帮助。提前致谢。

模板代码

<div class="profile_img">
              <div class="img">
                <img [src]="activeImageUrl" alt="Profile Image" class="img-fluid">
              </div>
              <div class="form-group">
                <div class="custom-file">
                  <input type="file" name="profile" (change)="onFileSelect($event)"
                    accept='image/*' />
                </div>
                <div *ngIf="submitted && f.profile.errors" class="text-danger">
                  <div *ngIf="f.profile.errors.required">Profile image is required</div>
                </div>
              </div>
            </div>

组件代码

  defaultUserProfileUrl:string = 'assets/images/default_user_profile.png';
  activeImageUrl = this.defaultUserProfileUrl;

 ngOnInit() {
// Get User details
        this.userService.getUserDetails(userDetails.id).subscribe((results) => {
          this.userdata = results.data;
          if (results['status'] === true) {

            this.activeImageUrl = results.data.profile_path ? results.data.profile_path : this.defaultUserProfileUrl;
            
            this.form.patchValue({
              first_name: results.data.first_name,
              last_name: results.data.last_name,
              email: results.data.email,
            });
          }
        });


  this.form = this.formBuilder.group({
     
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      email: ['', Validators.required],
      profile: ['', Validators.required],
    });
});        

  onSubmit() {
     this.formData = new FormData();
    this.formData.append('first_name', this.form.get('first_name').value);
    this.formData.append('last_name', this.form.get('last_name').value);
    this.formData.append('profile_image', this.form.get('profile').value);
}
 onFileSelect(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.form.get('profile').setValue(file);
      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => {
        //this.url = event.target.result;
        this.activeImageUrl = event.target.result as string;
      };
    }
  }

标签： angularimagevalidationfile-upload