以反应形式设置图像 url 会在角度 2 中产生误差

Question

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

core.js:6185 ERROR DOMException: Failed to set the 'value' 属性 on 'HTMLInputElement': This input element accepts a filename, 这可能只能以编程方式设置为空字符串。

下面是我的代码片段

component.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"
             height="200" width="200" 
            class="img-rounded" 
             [src]="imageSrc || 'http://placehold.it/180'" alt="your image" />

  </div>


//rest of form controls

但是当我看到我的提交按钮被禁用时，即使所有表单控件都具有 value.When 我在检查器中检查我发现 img 控制器具有 ng-invalid。可能是什么原因导致我无法 sure.Please 在这里帮助我

Answer 1

不允许以编程方式设置图像，因为它会导致安全问题并对database.So产生严重影响，您可以按照我的回答做

第一步 component.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)
    }

serrvice.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()
    })
  }

希望对您有所帮助

以反应形式设置图像 url 会在角度 2 中产生误差

Setting imge url in reactive form is giving error in angular2+

angular2-forms

angular2-template

angular

angular-reactive-forms

angular-forms