1

I have a button which opens a modal form that the <input> tag in this form has been set as readonly and the default values="{{data.sample}} has been populated by data I retrieved through an API call. I only wanted the user to open modal and see the details of an entry then they can click submit button to submit those data populated by default. I am able to see those {{data.sample}} in my input field and the user will not be able to edit before submission.

However, when I click the submit button, I did not pass those values together with the form. My form values are empty and have checked on my console that the form values are all empty. I tried creating a sample input that I can enter something to see if my form is working at all. I was able to capture those values keyed in manually but not those pre-populated {{data.sample}} values.

I don't understand why.

This is my modal in my component.html:

<ng-template #content let-modal>
                  <div class="modal-header">
                    <h5 class="modal-title">Transfer to bank for processing?</h5>
                  </div>

                  <div class="modal-body">
                    <div class="container d-flex flex-column">
                      <div class="row flex no-gutters">
                        <div class="col-12 mh-100">
                          <form [formGroup]="accountPayableProcessForm" (ngSubmit)="onProcess()">

                            <div class="form-group row">
                              <div class="col-sm-6">
                                <label class="my-label" for="owningAccount">Owning Account</label>
                                <input type="text" formControlName="owningAccount" class="form-control"
                                  value="{{data.owningAccount}}" />
                              </div>
                              <div class="col-sm-6" style="padding-left: 10px;">
                                <label class="my-label" for="accountPayableID">Account Payable ID</label>
                                <input type="text" formControlName="accountPayableID" class="form-control"
                                  value="{{data.accountPayableID}}" readonly />
                              </div>
                            </div>
...
...
...

                            <div class="form-group modal-footer">
                              <div class="override-alert">
                                <alert></alert>
                              </div>
                              <button [disabled]="loading" class="btn btn-primary">Process</button>

                            </div>

                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </ng-template>

This is my onProcess() and my formBuilder in my component.ts:

ngOnInit(): void {
    this.accountPayableProcessForm = this.formBuilder.group({
      owningAccount: [''],
      accountPayableID: [''],
      buyerAccount: [''],
      buyerCode: [''],
      ...
    });
  }

onProcess() {
    this.submitted = true;
    this.loading = true;
    console.log(this.accountPayableProcessForm.value);

    this.accountPayableService
      .processAccountPayable(this.accountPayableProcessForm.value)
      .pipe(first())
      .subscribe(
        data => {
          this.loading = false;
          this.submitted = false;
          window.location.reload();
          this.alertService.success(
            'Success! Account payable has been transferred to bank for processing',
            true
          );
        },
        error => {
          this.alertService.error('Submission failed, please try again');
          this.loading = false;
        }
      );
  }

I checked my console for console.log(this.accountPayableProcessForm.value);, all of the values are empty owningAccount: "".

Does it have something to do with the readonly or is it something else?

kaiilim
  • 579
  • 12
  • 31
  • You are initialising all the accountPayableProcessForm variables to empty strings in your ngOnInit method, but you are never mutating them - they will always be empty. – Phobos Oct 08 '19 at 08:32
  • Possible duplicate of [Angular 2 disabled controls do not get included in the form.value](https://stackoverflow.com/questions/40148102/angular-2-disabled-controls-do-not-get-included-in-the-form-value) – mbojko Oct 08 '19 at 08:34
  • Didn't I already specified them on the input as ```values="{{data.sample}}"``` which means they would be automatically mutated to match when I submit ```accountPayableProcessForm```? – kaiilim Oct 08 '19 at 08:36
  • @mbojko, I'm aware of that thread but none of the solutions work in my case, thanks. – kaiilim Oct 08 '19 at 08:39
  • Try using [value] instead of value? – Phobos Oct 08 '19 at 08:44
  • for which part? In the input tag? – kaiilim Oct 08 '19 at 08:47
  • Yeah - I suspect it is a binding problem. Is there a reason you aren't just initialising the values in the component.ts? Seems a bit over complicated to first initialise them to empty, then bind them through the front-end if you plan on making the fields readonly anyway... – Phobos Oct 08 '19 at 08:51
  • Tried changing it to [value] but there was an error. No particular reason, because I wanted to submit row data which was populated by my array through an API call. I am not sure how to initialize the object for whichever row of data the user chose to submit, how would I know which row the user has selected to pass to my ```onSubmit()``` in ```component.ts``` without using form input? I think you are right but I'm sure which how to go about passing the chosen object (row) without using form input. – kaiilim Oct 08 '19 at 08:57
  • If you have your list maintained within the component (which I can only assume you do) you could pass the id of the selected row to your onSubmit method and just find the row it relates to - then submit that to your api. – Phobos Oct 08 '19 at 12:36

1 Answers1

1

Instead of setting the values on the input. Set the values to the input control in your accountPayableProcessForm form group.

Here is the example

mxsxs2
  • 939
  • 4
  • 16