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

May be this answer will help:https://stackoverflow.com/questions/49970970/angular-5-file-upload-failed-to-set-the-value-property-on-htmlinputelement — Chellappan வ, May 20 '20 at 15:03

score 1 · Accepted Answer · answered May 22 '20 at 12:52

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

I can see it will work but I need to make reuqurired validator work — tyler, May 22 '20 at 12:54
Why you are using required validator so that user dont leave that feild empty .So first of all Its updation so there will be some value by default as you are fetching data from database .So there is no point of giving requrired validator.Although even if you want required validator ou can right some custom validation — Mehul Kothari, May 22 '20 at 12:55
Actuallly right I misssed that part that in updation part there will be some value coming from database so it will not be empty — tyler, May 22 '20 at 12:56

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

1 Answers1