为啥表单提交没有捕获我在输入标签中设置的只读默认值？

Posted 2023-03-13

【中文标题】为啥表单提交没有捕获我在输入标签中设置的只读默认值？

【英文标题】：Why form submission not capturing the default values I have set in the input tag that are readonly?为什么表单提交没有捕获我在输入标签中设置的只读默认值？

【发布时间】：2020-02-05 12:32:33

【问题描述】：

我有一个按钮可以打开一个模态表单，该表单中的<input> 标记已设置为readonly，默认values="data.sample 已由我通过API 调用检索到的数据填充。我只希望用户打开模式并查看条目的详细信息，然后他们可以单击提交按钮来提交默认填充的那些数据。我可以在我的输入字段中看到那些data.sample，并且用户将无法在提交前进行编辑。

但是，当我单击提交按钮时，我没有将这些值与表单一起传递。我的表单值是空的，并且在我的控制台上检查了表单值都是空的。我尝试创建一个示例输入，我可以输入一些内容来查看我的表单是否正常工作。我能够捕获那些手动键入的值，但不能捕获那些预先填充的 data.sample 值。

我不明白为什么。

这是我在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>

这是我的onProcess() 和我的formBuilder 在我的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;
        
      );
  

我检查了我的控制台console.log(this.accountPayableProcessForm.value);，所有的值都是空的owningAccount: ""。

它与readonly 有什么关系还是别的什么？

【问题讨论】：

您在 ngOnInit 方法中将所有 accountPayableProcessForm 变量初始化为空字符串，但您永远不会改变它们 - 它们将始终为空。

Angular 2 disabled controls do not get included in the form.value的可能重复

我不是已经在输入中将它们指定为values="data.sample"，这意味着当我提交accountPayableProcessForm 时它们会自动变异以匹配？

@mbojko，我知道该线程，但没有任何解决方案适用于我的情况，谢谢。

尝试使用 [value] 而不是 value？

【参考方案1】：

而不是在输入上设置值。将值设置为 accountPayableProcessForm 表单组中的输入控件。

Here is the example