禁用后无法从 Reactive Form 获取值

Question

编辑：这个问题的问题是因为"disable"不是"patchValue"，所以我修改标题来解决问题。

我有一个反应式表单，它必须根据另一个字段的值动态更新金额字段。更新部分通过使用 patchValue 工作正常，但是，一旦 patchValue 被触发，我就无法获得 amount 字段的值。

我的表格：

basicInfoForm: this.formBuilder.group({
    lc_currency :'',
    lc_amount :'',
  }),

我的主要Html:

<nav>
  <div class="nav nav-tabs" id="myTab" role="tablist">
    <a class="nav-item nav-link active" id="nav-basic-tab" data-toggle="tab" href="#nav-basic" role="tab">
      Internal Info
    </a>
  </div>
</nav>
  
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-basic" role="tabpanel" aria-labelledby="nav-basic-tab">
  <form [formGroup]="extraInfoForm">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
         <label class="control-label required-field">change amount?</label>
         <select class="form-control" formControlName="doModAmt"
              (change)="onDoModAmtChanged($event)" required>
           <option value="Y">Y</option>
           <option value="N">N</option>
          </select>
        </div>
      </div>
    </div>
  </form>
  <app-amd-lc-ext-action-basic [basicInfoForm]="basicInfoForm"></app-amd-lc-ext-action-basic>
  </div>
</div>

我的选项卡HTML:

<div style="width:90%;margin:auto">
 <div class="form-horizontal" id="div_form">
  <div [formGroup]="basicInfoForm">
 <div class="row">
   <div class="col-md-3">
  <div class="form-group">
       <label class="control-label required-field">New LC Currency</label>
    <input type="text" class="form-control" readonly=true formControlName="lc_currency" required>
  </div>
   </div>
   <div class="col-md-3">
     <div class="form-group">
       <label class="control-label required-field">New LC Amount</label>
       <input type="text" class="form-control" formControlName="lc_amount" required>
     </div>
   </div>
 </div>
  </div>
 </div>
</div>

主要 HTML 的 ts.

上的 onDoModAmtChanged 方法

onDoModAmtChanged(event: any){
    if(event.target.value == 'N'){
      this.basicInfoForm.controls['lc_amount'].patchValue("100000");
      this.basicInfoForm.controls['lc_amount'].disable();
    }else{
      this.basicInfoForm.controls['lc_amount'].enable();
    }
  }

doing 'this.basicInfoForm.value' on main ts, when onDoModAmtChanged is not fired (patchValue is not fired), value is:{"lc_currency":"USD","lc_amount":"50000"}, 这是正确的.

但是一旦 patchValue 被触发，lc_amount 就会消失，只剩下 lc_currency :{"lc_currency":"USD"}

有人能帮忙吗？非常感谢。

Answer 1

由于您禁用了 lc_amount 控件，因此在调用 this.basicInfoForm.value 时看不到它的值，因为它不显示禁用控件的值。

因此，如果您想检查所有表单控件值（包括禁用的值），请使用 getRawValue 方法：

this.basicInfoForm.getRawValue();

禁用后无法从 Reactive Form 获取值

Cannot get value from Reactive Form after Disable

angular

angular-reactive-forms