动态设置输入仍会使表​​单无效

Question

我有三个必填项。第一个输入框是手动输入的数量，第二个输入框是根据第一个输入的（输入）方法（数量/总计）计算的，第二个输入框是动态设置的总计（从DB）。动态设置这些输入可以正常工作。但是在自动设置“计算和总计”后，该表格仍然无效，如何使该表格有效，因为两个框都已经具有可以动态设置的值。

form.component.html

<mat-form-field class="w-10-p" appearance="outline">
     <input  matInput 
         formControlName="quantity" 
         type="number"
         (input)="computeValues(i, $event)"
         required>
</mat-form-field>

<mat-form-field class="w-10-p" appearance="outline">
     <input  matInput 
          formControlName="computed" 
          [id]="'computed'"
          type="number"
          required> 
</mat-form-field>

<mat-form-field class="w-10-p" appearance="outline">
      <input  matInput 
            formControlName="total" 
            [id]="'total'"
            type="number"
            required> 
</mat-form-field>

form.component.ts

computeValues(index,event){ //iluvJS
        var quantity=event.target.value;
        let total = (document.getElementById('total') as HTMLInputElement).value;
        var size = Math.round((parseFloat(total) / quantity) * 100) /100;
        (document.getElementById('size') as HTMLInputElement).value=size.toString();

    }

该表单仍然像那些输入仍然为空。

Answer 1

您必须这样做（如果要更新某些控件，请使用 patchValue ；如果要更改所有控件，请使用 setValue ）

this.yourForm.patchValue({
  total: 50,
  size: '123'
})

Answer 2

您的功能代码应该是这样的。

this.computeValues(index,event){ //iluvJS
    var quantity= this.formname.controls.quantity.value;
    let total = this.formname.controls.total.value;
    var size = Math.round((parseFloat(total) / quantity) * 100) /100;
    (document.getElementById('size') as HTMLInputElement).value=size.toString();
    this.formname.controls.size.setValue(size);

}