Patchvalue запускается только один раз

Question

Я только учусь Angular, и у меня есть проблема, которую я не могу решить. В моей реактивной форме у меня есть два таймера ngb (startTime, endTime). Я попытался вычесть их, а затем установил другой formcontrol (taskMins) с patchvalue. Он работает, но только один раз, и я хотел бы видеть, что значение taskMins изменяется каждый раз, когда изменяется значение timepickers. Это из компонента. Ts

ngOnInit(): void {
  this.myForm = this.fb.group({
  taskId: ['', Validators.required],
  comment: ['', Validators.required],
  startTime: ['', Validators.required],
  endTime: ['', Validators.required],
  taskMins: ({value: '', disabled: true}),
  isEditable: false,
  day: this.stringDate,
  });
  onChanges();
}

onChanges() {
this.myForm.valueChanges.subscribe(val => {
  if (this.myForm.controls['startTime'].valid &&
      this.myForm.controls['endTime'].valid)
      this.myForm.patchValue({taskMins: 
    (val.endTime.hour - val.startTime.hour) * 60 +
    (val.endTime.minute - val.startTime.minute)})
});
}

И из компонента. html

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<table class="table table-striped">
  <tbody>
    <tr>
      <td>
        <input type="number" formControlName="taskId" required>
      </td>
      <td>
        <input type="text" formControlName="comment" required>
      </td>
      <td> 
        <ngb-timepicker formControlName="startTime" 
         [spinners]="false" [size]="'small'" required>
        </ngb-timepicker>
      </td>
      <td>
        <ngb-timepicker formControlName="endTime" 
         [spinners]="false" [size]="'small'" required>
        </ngb-timepicker>
      </td>
      <td>
        <input type="number" formControlName="taskMins">
      </td>
      <td>
        <button type="submit" [disabled]="!myForm.valid" 
                class="btn btn-success">
          Submit
        </button>
      </td>
    </tr>
  </tbody>
</table>
</form>

Answer 1

Во-первых, неправильно подписывать изменения значений форм внутри функции onChanges (). В каждом цикле обнаружения изменений вы создаете новую подписку, и это обязательно приведет к утечке памяти. Вам не нужно обрабатывать жизненный цикл onChange, потому что вы уже прослушиваете изменения значений формы.

Попробуйте просто переместить код внутри функции onChanges внутри ngOnInit.