html - 如何绑定(bind)组件变量以形成对象实例属性

Question

我不太确定如何将组件类中的变量绑定(bind)到表单对象中的属性值。表单需要显示此值并将其添加到 ngModel这样它就可以成为对象实例的一部分。

我在语法上苦苦挣扎，不断收到错误 No value accessor for form control with name: 'per_print'
Error: No value accessor for form control with name:我想我需要使用 [(ngModel)]="myObject.property"语法，但我不是从表单的输入中获取它，而是从类上的绑定(bind)变量中获取。

  <div class="form-group">
       <label class="label-text" >Per Print</label>
       <div class="input-group" style="width:150px;">

          <h4 [(ngModel)]="job_entry.per_print"  name="per_print" 
      value='pricePerPrint'   class="form-control"
           >
          {{pricePerPrint | currency:'GBP':true:'1.2-2'}}
        </h4>
      </div>
    </div>

job_entry是我通过表单设置的对象。 pricePerPrint是类上的一个变量。我想将此变量设置为表单实例属性之一。这个怎么做？我以为我可以通过 value 做到这一点，如 value的 <h4>标记，但此错误仍然存​​在。

Answer 1

您可以使用包含您想要的值的[hidden] 输入字段，以便将此值添加到您的表单中。不过，这意味着您需要使用 pricePerPrint 作为 ngModel。但是可能不需要您的 job_entry 的 ngModel。您可以这样构建表单，这样您从表单中获得的对象就可以直接分配给 job_entry:

onSubmit(obj) {
  this.job_entry = obj;
}

同时检查 Demo 为此。

所以你的代码应该是这样的:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <input [hidden]="isHidden" name="per_print" 
       [(ngModel)]="pricePerPrint" [value]="pricePerPrint"/>
  <h4>Price: {{pricePerPrint}}</h4>
  <button type="submit">Submit</button>
</form>

其中 isHidden 设置为 true。

我看到的其他选项，如果你想使用 [(ngModel)]="job_entry.per_print，你需要将你在 pricePerPrint 中的任何值分配给 job_entry.per_print。