Двухстороннее связывание на угловой 6 реактивной форме - PullRequest
Новая
       21

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

0 голосов
/ 16 мая 2018

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

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

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

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

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

1 Ответ

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

Ну, если я вас правильно понимаю, у меня была похожая проблема, что я сделал (я действительно не знаю, если это лучшая практика) но это работает для меня так в 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],

});

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

...