Реактивные формы в Angular: двустороннее связывание - PullRequest
Новая
       20

Реактивные формы в Angular: двустороннее связывание

0 голосов
/ 10 июня 2018

У меня проблема с реактивными формами.Обновление класса модели, когда пользователь изменяет ввод, является прямым.Но мне нужно поступить противоположным образом: программно изменить модель и увидеть изменения в HTML-форме.

Упрощенный код: 

this.user = new User();

А затем: 

this.form = this.fb.group({
      name: new FormControl(this.user.name, [Validators.required]),
      email: new FormControl(this.user.email, [Validators.required])    
    });

Предположим, что он работает нормально.Если пользователь обновляет имя в графическом интерфейсе, this.user.name корректно обновляется.

Предположим, что я добавил некоторую логику в класс User, который заполняет электронную почту на основе введенного имени.Каждый раз, когда имя меняется, поле электронной почты автоматически генерируется как «* 10101 * имя» 10101 * «@ gmail.com» 1014

К сожалению, сгенерированное письмо не отображается в графическом интерфейсе.Как этого добиться?

Как уведомить FormGroup об изменениях в классе User?

У меня было две идеи:

1) Добавить ([ngModel]) - и это сработало -но я чувствую, что это плохая идея смешивать Reactive Forms с ngModel

2) Добавить следующий код, после того, как форма создана: 

this.form.controls["name"].valueChanges.distinctUntilChanged().subscribe(form => {
    this.form.patchValue({email: this.model.email});
});

Но она не выглядит чистой.Есть ли другой вариант?

1 Ответ

0 голосов
/ 10 июня 2018

Это не то, как реактивные формы предназначены для работы.

С реактивными формами форма не привязана к вашей модели, у нее есть своя собственная модель, которую вы можете увидеть, если посмотрите на форму.value ".

Значение, которое вы передаете элементу управления формы при его создании, не привязано, оно просто используется в качестве начального значения для элемента управления формы.

Предполагается, чтопользователь заполняет форму, проверки выполняются динамически (это реактивная часть), а затем, когда они отправляют форму, вы сразу же переносите значение формы в вашу модель.

Тем не менее, если вы хотитеобновить значение элемента управления формы, patchValue действительно правильный способ сделать это.

...