How to filter user input in Angular?

When using two-way binding [(ngModel)] with ngModelChange, Angular's change detection can cause timing issues where:

• The view doesn't reflect the updated model value immediately
• Input validation might not trigger properly
• The displayed value might not match the model value

Solution 1: Using setTimeout (Quick Fix)

@Component({
  selector: 'app-root',
  template: `
    <form>
      <label for="tracking">Tracking Number:</label>
      <input
        type="text"
        id="tracking"
        name="tracking"
        pattern="^[A-Z]{2,}\d{9,}[A-Z]{2,}$"
        title="Format must be like AB123456789CD"
        required
        minlength="13"
        maxlength="13"
        [(ngModel)]="trackingNumber"
        (ngModelChange)="onTrackingChange($event)"
      />
    </form>
  `,
  imports: [FormsModule],
  standalone: true
})
export class App {
  trackingNumber = '';

  onTrackingChange(value: string) {
    setTimeout(() => {
      this.trackingNumber = value.replace(/[^a-zA-Z0-9]/g,'').toUpperCase();
    });
  }
}

Option 2: Reactive Forms (Recommended)

For more robust solutions, especially with complex validation:

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <label for="tracking">Tracking Number:</label>
      <input
        type="text"
        id="tracking"
        formControlName="trackingNumber"
        pattern="^[A-Z]{2,}\d{9,}[A-Z]{2,}$"
        title="Format must be like AB123456789CD"
        required
        minlength="13"
        maxlength="13"
      />
    </form>
  `,
  imports: [ReactiveFormsModule],
})
export class App {
  form = new FormGroup({
    trackingNumber: new FormControl('')
  });

  constructor() {
    this.form.get('trackingNumber')?.valueChanges.subscribe((value:any) => {
      if (value) {
        const cleanValue = value.replace(/[^a-zA-Z0-9]/g,'').toUpperCase();
        this.form.get('trackingNumber')?.setValue(cleanValue, { emitEvent: false });
      }
    });
  }
}

[ngModelChange] is not equivalent to the javascript onChange because the javascript one is more akin to a keyup event and the angular ngModelChange depends on the update to the ngModel which creates almost a cyclic redundancy when you update the value during the value update.

so for your issue here is my suggestion:

in your template, change ngModelChange to keyup and then your onTrackingChange function should now receive an actual event object, see below for the code and stack blitz demo

@Component({
  selector: 'app-root',
  template: `
    <form>
      <label for="tracking">Tracking Number:</label>
      <input
        type="text"
        id="tracking"
        name="tracking"
        pattern="^[A-Z]{2,}\d{9,}[A-Z]{2,}$"
        title="Format must be like AB123456789CD"
        required
        minlength="13"
        maxlength="13"
        [(ngModel)]="trackingNumber" // changed here
        (keyup)="onTrackingChange($event)" // changed here
      />
      
    </form>
  `,
  imports: [FormsModule],
})
export class App {
  trackingNumber = '';

  onTrackingChange(value: any) { //changed expected parameter to any
    console.log('input fired');

    // Remove non-alphanumeric characters and force uppercase
    this.trackingNumber = this.trackingNumber.replace(/[^a-zA-Z0-9]/g, '')
                                             .toUpperCase(); // changed here
  }
}

Stack Blitz Demo

You can combine those two ways. You can remove ngModel and use input event and update input's value when event is fired.

<input
  type="text"
  id="tracking"
  name="tracking"
  pattern="^[A-Z]{2,}\d{9,}[A-Z]{2,}$"
  title="Format must be like AB123456789CD"
  required
  minlength="13"
  maxlength="13"
  (input)="onTrackingChange($event)" // change here
>

with:

onTrackingChange(event: Event) {     
  console.log('input fired');     
  const input = event.target as HTMLInputElement;     
  input.value = input.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();   
}

This way you shouldn't be able to enter invalid char. Basically, you can enter it but it will be immediately replaced with '' which shouldn't be visible.

If you want, you can introduce component's variable as you did with trackingNumber which you will update every time you update input's value.

Indeed, [ngModel] only updates the DOM upon detecting a change in the bound property - if the bound property hasn't changed, ngModel will not write to the DOM. This is by design, because writing to the DOM can have side effects, such as resetting cursor position and text selection.

If you want to do it anyway, you therefore have to do it yourself, for instance like this:

      <input
        type="text"
        id="tracking"
        name="tracking"
        pattern="^[A-Z]{2}\d{9}[A-Z]{2}$"
        title="Format must be like AB123456789CD"
        required
        minlength="13"
        maxlength="13"
        [ngModel]="trackingNumber"
        (ngModelChange)="onTrackingChange(trackingInput, $event)"
        #trackingInput
      />

and

  onTrackingChange(inputElement: HTMLInputElement, value: string) {
    const fixedValue = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
    this.trackingNumber = fixedValue;
    if (value != fixedValue) { 
      inputElement.value = fixedValue;
    }
  }

Note however, that this has the same usability artifacts as your plain DOM solution, in that any input will move the cursor to the end of the (fixed) text, which may be surprising if the cursor was previously elsewhere ...