Как правильно 2-way-bind с реактивными формами?

Question

До сих пор я всегда видел, что вы не должны смешивать, используя [(ngModel)] с реактивными формами, а вместо этого просто использовать formControlName,

Тем не менее, для меня это не похоже на работу?

У меня есть форма, и я добавляю к ней элементы управления

this.exportForm.addControl("surcharge", new FormControl(this.details.SurchargeExtraField));

и в моем HTML я даю вход formControlName

    <div class="col-sm-12 col-md-6">
        <input type="text" formControlName="surcharge" />
    </div>

Однако, когда я использую ввод, это ничего не меняет в this.details.SurchargeExtraField, это работает только для проверки.

Когда я делаю:

<input type="text" formControlName="surcharge" [(ngModel)="details.SurchargeExtraField" />

Это работает отлично, но, видимо, это не правильный путь.

Answer 1

Вы можете прослушать изменения формы, используя эту

  this.exportForm.valueChanges.subscribe((form) => {
     console.log(form);
   });

Для получения дополнительной информации о реактивной форме проверьте эту ССЫЛКУ

То же самое применимо к любому FormControl в форме, в которой вы можете искать изменения и действовать соответственно

Answer 2

Вы можете слушать изменения формы, как это

this.exportForm.valueChanges.subscribe((changes) => {
     console.log(changes);
});

или вы можете слушать изменения формы управления, как это

this.exportForm.get('surcharge').valueChanges.subscribe((change) => {
     console.log(change);
});

или вы можете сделать это

onChange (newVal) {
   console.log(newVal);
}

<input type="text" formControlName="surcharge" #surchargeInput (change)="onChange(surcharge.target.value)"/>

нет причин не смешивать formControlName и ngModel следующим образом:

<input type="text" id="name" [(ngModel)]="surcharge" 
       class="form-control" formControlName="surcharge">