Angular双向数据绑定-值变更：表单输入绑定技术问询

Hey Guilherme! Let's break down everything you need to know about tracking and reacting to value changes in your Angular form setup. First, let's recap your current setup to make sure we're on the same page:

• You've got a template-driven form with an input using [(ngModel)] tied to modelContrato.numero
• Your component receives modelContrato as an @Input(), initializes it in the constructor, and sets numero to '10' in ngOnInit

Here are the most practical ways to work with value changes in this scenario:

1. Listen to Real-Time Input Changes (Template-Level) #

If you want to react immediately when the user types into the input (or when the value is updated via code), use the (ngModelChange) event directly on your input. Update your template like this:

<form #modelContrato="ngForm" role="form" >
  <input 
    [(ngModel)]="modelContrato.numero" 
    id="numero" 
    class="form-control" 
    name="numero" 
    type="text" 
    autocomplete="off" 
    placeholder="Número Contrato" 
    #numero="ngModel" 
    required
    (ngModelChange)="onNumeroUpdated($event)" />
</form>

Then add the handler in your component:

onNumeroUpdated(newValue: string) {
  console.log('Contrato number changed to:', newValue);
  // Add your logic here—validation, syncing other data, API calls, etc.
}

Note: This triggers for both user input and programmatic changes (like your ngOnInit assignment), but early initialization values might not fire if the view hasn't fully bound yet.

2. Track Changes to the modelContrato.numero Property (Component-Level) #

If you need to react to changes even when they happen outside the input (e.g., parent component updating the @Input()), here are your best options:

Option A: Use an @Input() Setter #

Replace your direct @Input() with a setter/getter pair to catch when the modelContrato reference changes, and track the numero property:

import { BehaviorSubject } from 'rxjs';

private _modelContrato: Contrato = {} as Contrato;
private numeroSubject = new BehaviorSubject<string>('');

// Expose an observable to subscribe to numero changes
numero$ = this.numeroSubject.asObservable();

@Input() set modelContrato(value: Contrato) {
  this._modelContrato = value;
  // Set default numero if not provided
  if (!this._modelContrato.numero) {
    this._modelContrato.numero = '10';
  }
  // Emit the new numero value
  this.numeroSubject.next(this._modelContrato.numero);
}

get modelContrato(): Contrato {
  return this._modelContrato;
}

ngOnInit() {
  // Subscribe to numero changes
  this.numero$.subscribe(numero => {
    console.log('Model contrato number updated:', numero);
    // Handle your business logic here
  });
}

Option B: Use ngOnChanges for Input Reference Changes #

The ngOnChanges lifecycle hook triggers when your @Input() reference changes (note: this won't fire if only the numero property changes, only if the whole modelContrato object is replaced):

import { SimpleChanges } from '@angular/core';

ngOnChanges(changes: SimpleChanges) {
  if (changes['modelContrato']) {
    const oldContrato = changes['modelContrato'].previousValue;
    const newContrato = changes['modelContrato'].currentValue;
    
    if (oldContrato?.numero !== newContrato.numero) {
      console.log(`Contrato number changed from ${oldContrato?.numero} to ${newContrato.numero}`);
      // Run your logic here
    }
  }
}

Option C: Track Property Changes Directly #

If you need to catch every change to the numero property (even when the modelContrato reference stays the same), use Object.defineProperty to override the property's setter:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef: ChangeDetectorRef) {
  this.modelContrato = {} as Contrato;
}

ngOnInit() {
  this.modelContrato.numero = '10';
  
  // Override the numero property's setter
  let internalNumero = this.modelContrato.numero;
  Object.defineProperty(this.modelContrato, 'numero', {
    get: () => internalNumero,
    set: (newValue: string) => {
      console.log('Contrato numero property updated:', newValue);
      internalNumero = newValue;
      // Trigger change detection if needed
      this.cdRef.detectChanges();
    }
  });
}

3. Quick Troubleshooting Tips #

• Why isn't my ngOnInit value showing up? Ensure FormsModule is imported in your feature module (it's required for ngModel). If the value still doesn't render, call this.cdRef.detectChanges() after assigning the value in ngOnInit to force change detection.
• Two-way binding not working? Double-check that your input has a name attribute (you already have this!)—Angular requires it for template-driven forms to track the control.

内容的提问来源于stack exchange，提问作者Guilherme Marques