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

Question

I am working on angular application and I have successfully retrieved data from database and trying to set values of form control using patch Value method but unfortunately I am getting error i.e

core.js:6185 ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Below is my code Snippet

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

But when I see my submit button is disabled even though all form controls having value.When I inspect in inspector I found img controller is having ng-invalid. What could be the reason I am not sure.Please help me here

Answer 1

Setting of image programatically is not allowed as it can lead to security issues and can have serious impact on database.So what you can do is follow my answer

Step1 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()
    })
  }

Hope it will be helpful