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 的值是一个更好的解决方案。并将小计的输入更改为普通文本字段以显示它。