Angular Reactive Forms binding a control to multiple inputs doesn't refresh the others

Question

When I am using reactive forms and try to access the same control in multiple Inputs it looks like it's only a one-way-data-binding (input-to-model). If I edit an input it will update the model correctly but it will not refresh the other input as well.

<input type="text" formControlName="test" id="in1">
<input type="text" formControlName="test" id="in2">

My work-a-round is to add the following line to both inputs:

(change)="form.controls.test.setValue(form.controls.test.value)

But to be honest this looks like a pretty bad solution. Am I doing anything wrong here? What is the correct way to archive this?

https://plnkr.co/edit/yALzCIHgOA463OvGi5rP

The correct way to achieve it is: not to do it. What is the aim of have two inputs in the same form? If you want, you can make two forms (the [formGroup] can be referred to the same variable) — Eliseo
– Eliseo, Commented Mar 27, 2018 at 16:36
I want to set a daterange with several different inputs. I want to allow the user to select a whole month from a select or only choose one day with a datepicker. — bb1
– bb1, Commented Mar 28, 2018 at 10:14

Alexander Zhukov · Accepted Answer · 2018-10-30 12:05:27Z

3

I don't sure why you need exactly 2 fields with same formControlName but a solution could be - Create custom angular element.

@Component({
  selector: 'custom-element',
  templateUrl: `
    <input type="text" [(ngModel)]="value">
    <input type="text" [(ngModel)]="value">
  `,
  styleUrls: ['./custom-element.component.css']
})
export class CustomElementComponent implements ControlValueAccessor

@Input() value: any 

writeValue(value: any) {
  // Some if statements
  this.value = value;
}

registerOnChange(fn: Function) {
  // your code here
}
registerOnTouched(fn: Function) {
  // your code here
}

And in the parent component template

<custom-element formControlName="fieldname"></custom-element>

For more details (and deeper explanation), you can check https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

answered Oct 30, 2018 at 12:05

Alexander Zhukov

863 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bb1 Over a year ago

I want to manipulate a date with separate selects for month, date, year etc. But my plan was to use the same value in the background. I think it's not possible without a custom element like you suggested (or my hack).

Yerkon · Accepted Answer · 2018-03-27 15:55:17Z

2

You can use ngModel:

<div>
    <form [formGroup]="form">
        <h2>Test = {{form?.controls.test.value}}</h2>
        1. <input type="text" formControlName="test" [(ngModel)]="test"> 
    2. <input type="text" formControlName="test" [(ngModel)]="test"> 
    3.
        <button type="button" (click)="form.controls.test.setValue('manual')">change with setValue</button>
    </form>
</div>

The two-way binding syntax is really just syntactic sugar for a property binding and an event binding

For example:

<app-sizer [(size)]="fontSizePx"></app-sizer>

Is equal to:

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

CODE EXAMPLE

answered Mar 27, 2018 at 15:55

Yerkon

4,8182 gold badges21 silver badges32 bronze badges

2 Comments

Eliseo Over a year ago

NOT is good mixing Reactive and Template Forms (formControlName and ngModel)

bb1 Over a year ago

It feels a bit dirty. Especially because I have to create a new model field "test" which is redundant with the form values. This is basically the same as I did with my change-event.

Collectives™ on Stack Overflow

Angular Reactive Forms binding a control to multiple inputs doesn't refresh the others

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related