Change HTML value based on typescript value

Question

I'm new to Angular, I'm trying to set a value to an input using typescript to an HTML input, it is working fine however, when I submit the form it reads the value as an empty string, if I typed anything in the input in addition to the value that has been set the from submits with the value successfully, but doesn't submit if the value is set without changing anything manually, please advise if there is a better approach or how to correct this, thanks in advance.

company.component.html

<input type="text" id="LogoImageUrl" formControlName="LogoImageUrl">

company.component.ts

this.editCompanyForm = this.fb.group({
 LogoImageUrl: new FormControl({ value: ''})
})

this.image = (
  <HTMLInputElement>document.getElementById("LogoImageUrl")
).value = this.imageUrl


uploadFile(file) {
const contentType = file.type;
const bucket = new S3(
      {
          accessKeyId: 'key',
          secretAccessKey: 'key',
          region: 'region'
      }
  );
  const params = {
      Bucket: 'name',
      Key: 'url' + file.name,
      Body: file,
      ACL: 'public-read',
      ContentType: contentType
  };
  bucket.upload(params, function (err, data) {


      if (err) {
          console.log('There was an error uploading your file: ', err);
          return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
  }); 
  bucket.upload(params).on('httpUploadProgress', function (evt) {
      console.log(evt.loaded + ' of ' + evt.total + ' Bytes');
  }).send(function (err, data) {

      if (err) {
          console.log('There was an error uploading your file: ', err);
          return false;
      }
      this.imageUrl = data.Location;
      this.editCompanyForm.patchValue({
        'LogoImageUrl': this.imageUrl
      });  
      return true;
  });

  }

Can you create stackblitz?

Chellappan வ
– Chellappan வ

2020-02-06 12:30:36 +00:00
Commented Feb 6, 2020 at 12:30 — Chellappan வ
– Chellappan வ, Commented Feb 6, 2020 at 12:30
I have updated my code, please check it out

Omar
– Omar

2020-02-06 13:29:02 +00:00
Commented Feb 6, 2020 at 13:29 — Omar
– Omar, Commented Feb 6, 2020 at 13:29

Chellappan வ · Accepted Answer · 2020-02-06 14:11:15Z

1

You have to use arrow function for s3 instance to bind current component this context.

Try this:

component.ts

uploadFile(file) {
const contentType = file.type;
const bucket = new S3(
      {
          accessKeyId: 'key',
          secretAccessKey: 'key',
          region: 'region'
      }
  );
  const params = {
      Bucket: 'name',
      Key: 'url' + file.name,
      Body: file,
      ACL: 'public-read',
      ContentType: contentType
  };
  bucket.upload(params,(err, data)=> { 
      if (err) {
          console.log('There was an error uploading your file: ', err);
          return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
  }); 
  bucket.upload(params).on('httpUploadProgress', (evt)=>{
      console.log(evt.loaded + ' of ' + evt.total + ' Bytes');
  }).send(()=> (err, data) {

      if (err) {
          console.log('There was an error uploading your file: ', err);
          return false;
      }
      this.imageUrl = data.Location;
      this.editCompanyForm.patchValue({
        'LogoImageUrl': this.imageUrl
      });  
      return true;
  });

  }

answered Feb 6, 2020 at 14:11

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chellappan வ Over a year ago

Are you getting same erro?

Omar Over a year ago

It finally worked, I can't thank you enough my friend

Chellappan வ Over a year ago

Glad to help my friend!

Caro · Accepted Answer · 2020-02-06 10:47:53Z

1

You can try

this.editCompanyForm.controls["LogoImageUrl"].setValue(this.imageUrl);

A form control instance provides a setValue() method that updates the value of the form control. You can look at https://angular.io/guide/reactive-forms

answered Feb 6, 2020 at 10:47

Caro

6506 silver badges11 bronze badges

8 Comments

Omar Over a year ago

I've tried this and it is coming up with ERROR TypeError: Cannot read property 'controls' of undefined

Caro Over a year ago

and this ? this.editCompanyForm.get('LogoImageUrl').setValue(this.imageUrl);

Omar Over a year ago

unfortunately came up with the same "Cannot read property 'get' of undefined"

Caro Over a year ago

and this.editCompanyForm.patchValue({ LogoImageUrl: this.imageUrl }); ? your editCompanyForm is initialized? if it's still not ok, could you provide your complete code please

Omar Over a year ago

ERROR TypeError: Cannot read property 'patchValue' of undefined

|

William Andreu · Accepted Answer · 2020-02-06 11:30:50Z

0

Have you initialized the formbuilder in the ngOnInit ()? If you have not done so, it will give you undefined.

answered Feb 6, 2020 at 11:30

William Andreu

1095 bronze badges

3 Comments

Omar Over a year ago

Yes, I have initialized it

William Andreu Over a year ago

try . ---> LogoImageUrl: [' '] and use this.editCompanyForm.controls.LogoImageUrl.setValue(this.imageUrl);

Omar Over a year ago

the problem presists in controls,,,it is coming up with undefined

Collectives™ on Stack Overflow

Change HTML value based on typescript value

3 Answers 3

3 Comments

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related