formControlName输入值未定义

Question

我有一个formControlName的问题，我想提交这个表单，但是一个输入是未定义的，就像在照片中一样。

在控制台中查看我提交的内容：

我使用了这段代码：

<form [formGroup]="addProductForm" (ngSubmit)="onAddProduct()" class="col s12" materialize style="text-align:center">
    <div class="input-field col s12">
      <input formControlName="Quantity" id="Quantity " type="number" class="validate" [(ngModel)]="Quantity">
             </div>
    <div class="input-field col s12">
      <input formControlName="Unit_price" id="Unit_price" type="number" class="validate" [(ngModel)]="Unit_price">
           </div>
    <div class="input-field col s12">
     <div class="c1" style="text-align:left;">
        Subtotal:
      <input formControlName="Subtotal" id="Subtotal" type="number" class="validate" [(ngModel)]="Subtotal" [value]="Quantity*Unit_price">
    </div>
  </div>

  <br>
  <div id="add_contrat_button_container" class="row">
    <button id="add_contrat_button" type="submit" class="button button1">
      Submit
    </button>
  </div>
</form>

请你能看一下并问我这段代码中的问题，在Subtotal设置自动此值[value]="Quantity*Unit_price"但不提交。谢谢

Answer 1

首先，您需要删除ngModel，因为您已经使用了formControlName。您可以通过此链接angular2 and formControlName value in template查看。它可能对您有所帮助。我不明白为什么你需要这样做。我认为你应该在提交表单后设置Subtotal的值是一个更好的解决方案。并将小计的输入更改为普通文本字段以显示它。