Как использовать [(ngModel)] с FormGroup в Angular

Question

У меня есть 3 поля ввода в моем HTML:

<mat-form-field>
    <input readOnly="readonly" name="aCertainNumberFromDatabase" formControlName="aCertainNumberFromDatabase" matInput type="number">
</mat-form-field>

<mat-form-field>
    <input readOnly="readonly" name="result" formControlName="result" matInput type="number">
</mat-form-field>

<mat-form-field>
    <input name="userInput" formControlName="userInput" matInput type="number">
</mat-form-field>

В component.ts У меня есть эта группа форм:

this.myform = myForm();

myForm() {
  return this.formBuilder.group({
    result: [this.result],
    userInput: [this.userInput],
    aCertainNumberFromDatabase: [this.aCertainNumberFromDatabase]
  })

Когда пользователь вводит число в В поле userInput должно быть добавлено число из базы данных, показанное в поле aCertainNumberFromDatabase, а результат должен быть автоматически помещен в поле result. Как я могу сделать это, используя [(ngModel)] и этот FormGroup?

Answer 1

В реактивной форме обычно мы не используем ngModel. Вы можете установить значение с помощью:

this.myForm.controls.aCertainNumberFromDatabase.setValue(value);

Как только вы получите значение, вы можете установить значение с помощью приведенного выше фрагмента.

См. Демонстрационный пример ниже:

https://stackblitz.com/edit/angular-sf-reactive-from-issue?file=src%2Fapp%2Fapp.component.html

https://angular-sf-reactive-from-issue.stackblitz.io

Надеюсь, это поможет.