Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

Question

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

While working with reactive forms, I encountered an issue where accessing the same control in multiple inputs seemed to result in one-way data binding (input-to-model). If I make edits in one input, it updates the model correctly but does not refresh the other input as expected.

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

To address this, I found a workaround by adding the following line to both inputs:

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

However, I believe this solution is not ideal. Am I missing something here? What is the proper way to achieve the desired outcome?

https://plnkr.co/edit/yALzCIHgOA463OvGi5rP

javascript angular typescript data-binding angular-reactive-forms

Answer 1

Answer №1

It may not be clear why you would require two fields with the same formControlName, but one possible solution is to create a 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) {
  // Include some conditional statements
  this.value = value;
}

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

In the parent component template, include:

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

For additional insights and in-depth explanations, refer to

Answer 2

It may not be clear why you would require two fields with the same formControlName, but one possible solution is to create a 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) {
  // Include some conditional statements
  this.value = value;
}

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

In the parent component template, include:

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

For additional insights and in-depth explanations, refer to

Answer 3

Answer №2

To implement two-way binding, you can utilize 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>

Essentially, the two-way binding syntax simplifies a combination of property and event bindings.

For instance:

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

Can be written as:

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

VIEW CODE EXAMPLE

Answer 4

To implement two-way binding, you can utilize 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>

Essentially, the two-way binding syntax simplifies a combination of property and event bindings.

For instance:

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

Can be written as:

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

VIEW CODE EXAMPLE

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

Answer №1

Answer №2

Similar questions

Passing Props from _app.js to Page in ReactJS and NextJS

Determining the optimal number of rows and columns based on an integer value

Sliding horizontally with a responsive touch

Tips for Passing the correct ID to the modal component in reactJs

What is the best way to transmit error messages from the server to the client?

Footer button overrides list components due to improper implementation of vertical ion-scroll

A type error was thrown: $.ajax function does not exist within another function

Display of Navigation Bar in Angular is Not Proper

Obtain Relative URL with the help of Selenium using the PhantomJS driver

Identify the primary application using a hybrid application

Accept only requests from my Chrome extension

NEXT JS - Application renders twice due to rewrites in place

The JQuery error encountered was due to a missing colon after the property ID

Is there a way to leverage the extensive Bootstrap 5 color palette within an Angular application?

Angular2 displays an error stating that the function start.endsWith is not recognized as a valid function

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

"Encountering an Error with Route.get() when attempting to utilize an imported

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Troubleshooting NativeScript 5: Uncovering the iOS Memory Woes of Crashes and Le

In Ionic 4, a special character is showing up before the form tag