禁用后无法从响应式表单中获取值答案

【问题标题】：Cannot get value from Reactive Form after Disable禁用后无法从响应式表单中获取值
【发布时间】：2019-08-31 19:34:04
【问题描述】：

编辑：这个问题的问题是因为“禁用”而不是“补丁值”，所以我修改了我的标题来解决这个问题。

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

我的表格：

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();
    }
  }

在main ts上做'this.basicInfoForm.value'，当onDoModAmtChanged不触发（patchValue不触发）时，值为：{"lc_currency":"USD","lc_amount":"50000"}，正确。

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

有人可以帮忙吗？非常感谢。

【问题讨论】：

当onDoModAmtChanged 被触发时，lc_amount formControl 会被禁用吗？（在event.target.value == 'N' 的情况下）
@MohamedAliRACHID 是的，lc_amount formControl 被禁用。哦，天哪，问题是“禁用”部分，不是吗？
是的，请检查我的答案。

标签： angular angular-reactive-forms

【解决方案1】：

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

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

this.basicInfoForm.getRawValue();

【讨论】：