Двусторонняя привязка на угловой 6 реактивной форме

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

Поведение, которого я пытаюсь достичь, очень похоже на двустороннюю привязку данных формы, управляемой шаблоном: когда пользователь редактирует ввод формы, объект данных изменяется автоматически.

но в отличие от формы, управляемой шаблоном, я не могу использовать [(ngModel)], потому что он устарел в реактивных формах для angular V6.

Я знаю, что fromGroup.patchValue() будет выполнять только одностороннюю привязку, и тогда мне придется вручную подписываться на изменение событий и вручную обновлять объект данных - это приведет к утомительному коду.

Есть ли обходной путь для этого сценария?


angular two-way-binding angular-reactive-forms angular6
person Idan Abrashkin    schedule 16.05.2018    source источник
comment
Ваш form.value объект уже имеет последнее значение формы, зачем вам ngModel?   -  person ibenjelloun    schedule 16.05.2018
comment
form.value будет обновлен, но не исходные данные источника. например, если я установил значение formControl 'name' со значением data ['name'], и пользователь изменил имя, значение в data ['name'] по-прежнему будет содержать исходное значение.   -  person Idan Abrashkin    schedule 16.05.2018
comment
Я тоже не знаю, почему это изменение, теперь мне нужно будет обновить подробный код с большим количеством наборов и наборов, которые не были нужны раньше ..   -  person Hllink    schedule 14.06.2018
comment
Это действительно шаг назад. У реактивных форм больше нет хорошего способа делать двустороннее связывание. Серьезно, теперь мне нужно посмотреть значения формы и обновить модель вручную. Особенно с труднодоступным моделированием вложенных объектов. Раньше мне приходилось беспокоиться только один раз, а затем выполнять всю привязку данных. Вот и все.   -  person Michelangelo    schedule 07.10.2019

Ответы (2)


arrow_upward
5
arrow_downward

Что ж, если я вас правильно понимаю, у меня была аналогичная проблема, что и у меня (я действительно не знаю, является ли это лучшей практикой), но для меня это работает так в HTML:

<mat-form-field class="mat-container">
    <input matInput  [formControl]="generalDiscount" type="number" 
        formControlName="generalDiscount" 
        (input)="course.amounts.generalDiscount = $event.target.value" <-the workaround 
        placeholder="Discount" required="required">
</mat-form-field>

Этот ввод делает его двусторонней привязкой, и в вашем классе .ts вам нужно поместить то же поле в свою группу форм, например

this.amountGroup = this._formBuilder.group({

    [this.course.amounts.fitToNomberOfPeople,Validators.required],
    generalDiscount:[this.course.amounts.generalDiscount,Validators.required],

});

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

person oren    schedule 20.06.2018
comment
Это действительно хороший обходной путь, но в итоге я вообще не использовал формы Angular. Я использую примитивные проверки для своих полей, потому что проверки довольно просты. тем не менее, я немного разочарован тем, что Angular не предлагает лучшую систему для решения этой ситуации. - person Idan Abrashkin; 23.06.2018
comment
Я получаю массив изображений из HTTP-запроса и вставляю его в массив и отображаю с помощью ngfor. для первого набора он работает, а после прокрутки страницы не работает динамическая загрузка изображений. Получение текста также работает динамически при прокрутке. Вы можете сказать мне, почему? - person Thilak Raj; 26.06.2018
comment
Это спасло меня. Я пробовал прислушиваться к изменениям значений в элементе управления формы, но это не сработало. - person I.Tyger; 14.07.2018

arrow_upward
0
arrow_downward

Какой-то обходной путь.

Предложение использовать (вводить) событие. formControl1 обновляет собственное значение и записывает его значение в formControl2 с дополнительным текстом «@ example.com». Изменение значения formControl2 обновляет собственное значение и обновляет formControl1 полосатым текстом «@ example.com».

import { Component } from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-template-and-reactive-form',
  template: '<input #inp1 [ngModel]="formControl1.value" ' +
    '(input)="formControl1.setValue(inp1.value);formControl2.setValue(inp1.value+\'@example.com\')" ><br>\n' +
    '<input #inp2 [ngModel]="formControl2.value" ' +
    '(input)="formControl2.setValue(inp2.value);formControl1.setValue(inp2.value.replace(\'@example.com\',\'\'))"><br>\n' +
    'formControl1 value: {{formControl1.value}}<br>\n' +
    'formControl2 value: {{formControl2.value}}<br>',
  styleUrls: ['./template-and-reactive-form.component.scss']
})
export class TemplateAndReactiveFormComponent  {
  formControl1 = new FormControl('');
  formControl2 = new FormControl('');
}
person Michal.S    schedule 23.10.2019