0

I have angular reactive form by which I am adding data. Adding and updating data working correctly. Below is code

    //create form group
        this.form = this.formBuilder.group({
          name: ['', Validators.required],
          categoryImage: [''],
          isActive: true
        }

When I want to edit this record, I am fetching data from database by Id as below

    this.crudService.getById(Category, this.id, 'masters/category')
            .pipe(first())
            .subscribe(
              (cateory) => {
                this.data = cateory;
                this.form.patchValue(this.data['data'][0])
              });

Here this.data['data'][0] returns object as below

    { 
        id: 5, 
        name: "cat122222", 
        image: "uploads/images/categories/node.png", 
        isActive: 1, 
        createdBy: 1, 
        createdAt: "2021-09-05T03:32:35.000Z", 
        updatedBy: null, 
        updatedAt: "2021-09-05T03:32:35.000Z" 
    }

value of categoryImage form controller is in image property of object.

Here is my HTML for file controller.

    <input
              formControlName="categoryImage"
              class="form-control file-upload category-control"
              type="file"
              value="image"
              (change)="getFile($event)"
            />

but when I open Edit form, I want to show File name in File Control. How can I show file name there? enter image description here

Right now. I can show image file but I want that image name in file controller as well, so user don't need to select file again if no change in file.

JsNgian
  • 795
  • 5
  • 19
Prasad Gavande
  • 213
  • 1
  • 4
  • 19
  • I'm not sure its possible to set the value property for input type - file. check this : https://stackoverflow.com/a/49971122/9390292 – Abdu Manas C A Sep 10 '21 at 06:20
  • Hi Abdu, name can be shown like this this.form.patchValue({name: this.data['data'][0].name} but image cannot ? – Prasad Gavande Sep 10 '21 at 06:28
  • 1
    To my knowledge. You cannot. For other HTML input elements, we can set the value without any problems. But for input type file - the value can't be assigned. I've tried using a stackblitz too. https://stackblitz.com/edit/angular-ivy-jqdmqb?file=src/app/app.component.ts – Abdu Manas C A Sep 10 '21 at 06:40

0 Answers0