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

我有三个输入框，都是必需的。第一个输入框是手动输入的数量，第二个输入框根据第一个输入（数量/总量）的（输入）方法计算，第三个输入框是动态设置的总量（从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>

---

表单的作用仍然像那些输入仍然是空的一样。

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

---

您的函数代码应该是这样的

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

}

---

不要将

document.getElementById（'size'）用作HTMLInputElement.value

要设置值，请使用表单控件，而不要在html中设置值，但不要在表单中设置值。使用form.get（[path to control]）.patchValue（value）即form.get（['total']）.patchValue（30）@xyz谢谢你，先生。我是angular的新手，我真的不了解表单控件的整个概念，或者你的确切意思是什么。你能给我任何能帮助我理解它的链接吗？很抱歉，如果您觉得请求很愚蠢。@Code4Funn4确保来自的文档将是您最好的指南。为了回答您的问题，Qellson已经在他的评论中给出了答案。@code4funn4rease您为什么不使用form.patchValue？

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

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

}