以反应形式设置图像 url 在角度 2 中给出错误

Posted 2023-03-13

【中文标题】以反应形式设置图像 url 在角度 2 中给出错误

【英文标题】：Setting imge url in reactive form is giving error in angular2+

【发布时间】：2020-09-06 23:51:13

【问题描述】：

我正在开发 Angular 应用程序，我已成功从数据库中检索数据并尝试使用 patch Value 方法设置表单控件的值，但不幸的是我遇到了错误 即

core.js:6185 ERROR DOMException: 未能在“HTMLInputElement”上设置“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

下面是我的代码片段

组件.ts

 ngOnInit(): void 
this.EditForm();

this.GetValues() //method where I am retreiving data from firebase and iside it I am calling set Value


 EditForm() 


    this.exampleForm = this.fb.group(
      imgurl: ['',Validators.required],
      title: ['', Validators.required],
      desc: ['', Validators.required],
      category: [this.selected, Validators.required],
      subcategory: ['  ', Validators.required],
      name: ['', Validators.required],
      privacy: ["true"],
    );
  

  setFormValue(d4) 
    this.imageSrc=d4.imgurl // this I have done to use string interpolation in template

    this.exampleForm.patchValue(
     imgurl:this.imageSrc,
      title:d4.title,
      desc:d4.desc,
      category:d4.category,
      name:d4.name,
      privacy:d4.privacy
    )
  

component.html

<div class="col-md-8 col-sm-9 col-xs-9">
    <form class="create-form" [formGroup]="exampleForm" novalidate (ngSubmit)="onSubmit(exampleForm.value)">

        <div class="col-md-4 col-sm-3 col-xs-12">
            <input type="file" multiple (change)="detectFiles($event) "
            accept="image/x-png,image/gif,image/jpeg" 
            class="form-control" 
             formControlName="imgurl">
            <img id="imgid"
               
            class="img-rounded" 
             [src]="imageSrc || 'http://placehold.it/180'"  />

  </div>


//rest of form controls

但是当我看到我的提交按钮被禁用时，即使所有表单控件都具有价值。当我在检查器中检查时，我发现 img 控制器有 ng-invalid。我不确定的原因可能是什么。请在这里帮助我

【问题讨论】：

这个答案可能会有所帮助：***.com/questions/49970970/…

【参考方案1】：

不允许以编程方式设置图像，因为它可能导致安全问题并对数据库产生严重影响。所以你可以做的是按照我的回答

步骤 1 组件.ts

     EditForm() 
        this.exampleForm = this.fb.group(
          imgurl: [''],               // remove required validator so invalid will go away

        );
      

    setFormValue(d4) 
        this.imageSrc=d4.imgurl   // string inerpollation
        this.downloadURL=d4.imgurl  //this value we will send to database
        this.exampleForm.patchValue(

          title:d4.title,
         ...// your other form values
        )
      

      onSubmit(value: UPost) 

        this.yourservice.update(this.id, this.d4[this.id],value,this.downloadURL)
    

service.ts

update(id, value, formvalue, imgurl) 
    this.postdata = 
      title: formvalue.title,
       imgurl: imgurl,

      ...// your formvalues

    
    console.log(value)

      this.http.patch(
        `https://write-your-heart-out-b338b.firebaseio.com/post/$this.uid/public/$this.db_key.json`, this.postdata)
        .subscribe()
    )
  

希望对你有帮助

【讨论】：

我可以看到它会工作，但我需要让 reuqurired 验证器工作

为什么你使用必需的验证器，这样用户就不会把那个字段留空。所以首先它的更新，所以默认情况下会有一些价值，因为你从数据库中获取数据。所以没有意义提供所需的验证器。尽管即使您想要所需的验证器，您也可以正确一些自定义验证

其实我错过了在更新部分会有一些来自数据库的值，所以它不会为空