Correct Methods for Dynamically Setting Input Field Values in Angular 6

Problem Background and Common Misconceptions

In Angular development, many developers are accustomed to using native DOM manipulation methods to handle dynamically generated input elements, such as retrieving elements via document.getElementById and setting their value attribute. Here is a typical erroneous example:

copyPricingToAll(): void {
  var copyValue: string = document.getElementById("priceInputGlobal").value;
  this.currentItem.orderLines.forEach(orderLine => {
    document.getElementById("priceInput-" + orderLine.id).setAttribute("value", copyValue);
  });
}

The issue with this approach is that it bypasses Angular's data binding mechanism, leading to desynchronization between the view and the model state. Angular's change detection cannot perceive such direct DOM manipulations, so updates are not reflected in the component's data model.

Using ngModel for Two-Way Data Binding

Angular provides the ngModel directive to achieve two-way data binding for form controls. First, you need to import FormsModule in your application's root module:

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // Component declarations
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  // Other configurations
})

In the template, use the [(ngModel)] syntax to bind the input field to the component's data model:

<td><input type="number" [(ngModel)]="orderLine.price"></td>

The combination of square and round brackets here denotes two-way binding:

• [] indicates one-way data flow from TypeScript to HTML (input binding).
• () indicates one-way data flow from HTML to TypeScript (output binding).
• [()] combines both, enabling bidirectional data synchronization.

With this approach, when a user modifies the value in the input field, orderLine.price is automatically updated; conversely, when orderLine.price is modified in the component, the input field's value changes accordingly.

Code Refactoring and Best Practices

To avoid common errors in ID management, it is recommended to encapsulate the element ID generation logic in a component method:

getElementId(orderLine: any): string {
  return "priceInput-" + orderLine.id;
}

Use property binding in the template:

<td><input [id]="getElementId(orderLine)" type="number" [(ngModel)]="orderLine.price"></td>

This method enhances code maintainability and reduces bugs caused by inconsistent ID spellings.

Alternative Approach: Reactive Forms

In addition to template-driven forms, Angular offers Reactive Forms as a more powerful alternative. Reactive Forms provide better type safety and testability by explicitly creating and managing form controls.

First, import the necessary modules:

import { FormGroup, FormControl, FormArray } from '@angular/forms';

Define the form structure in the component:

mainForm: FormGroup;

constructor() {
  this.mainForm = this.getForm();
}

getForm(): FormGroup {
  return new FormGroup({
    globalPrice: new FormControl(),
    orderLines: new FormArray(this.orderLines.map(this.getFormGroupForLine))
  });
}

getFormGroupForLine(orderLine: any): FormGroup {
  return new FormGroup({
    price: new FormControl(orderLine.price)
  });
}

Bind the form controls in the template:

<form [formGroup]="mainForm">
  Global Price: <input type="number" formControlName="globalPrice">
  <button type="button" (click)="applyPriceToAll()">Apply to all</button>
  <table formArrayName="orderLines">
    <ng-container *ngFor="let orderLine of orderLines; let i = index" [formGroupName]="i">
      <tr>
        <td>{{orderLine.time}}</td>
        <td>{{orderLine.quantity}}</td>
        <td><input formControlName="price" type="number"></td>
      </tr>
    </ng-container>
  </table>
</form>

Implement the batch update method:

applyPriceToAll() {
  const formLines = this.mainForm.get('orderLines') as FormArray;
  const globalPrice = this.mainForm.get('globalPrice').value;
  formLines.controls.forEach(control => control.get('price').setValue(globalPrice));
}

Reactive Forms offer finer control, such as disabling event emission when setting values: setValue(globalPrice, { emitEvent: false }).

Conclusion

When dynamically setting input field values in Angular, prioritize using the framework's data binding mechanisms over direct DOM manipulation. ngModel provides simple two-way binding suitable for most scenarios, while Reactive Forms are ideal for complex form logic and advanced validation needs. By adhering to these best practices, you can ensure clear, maintainable data flow in your application and fully leverage Angular's powerful features.