@HostBinding 如何在输入元素上工作

Question

I'm new to Angular, just a question on data binding on input element. Below is the code:

<input id="test" [paModel]="newProduct.name" (input)="newProduct.name=$event.target.value" />

and directive class:

@Directive({
    selector: "input[paModel]"
})
export class PaModel {
  ...
  @Input("paModel")
  modelProperty: string;

  @HostBinding("value")
  fieldValue: string = "";

  @Output("paModelChange")
  update = new EventEmitter<string>();

  @HostListener("input",["$event.target.value"])
    updateValue(newValue: string) {
        this.fieldValue = newValue;
        this.update.emit(newValue);
    }
}

I'm confused here, why we need @HostBinding("value") on fieldValue ? when we type sth in the input, isn't that the value of the input element will get updated to latest value automatically by the browser?

Answer 1

According to angular documentation HostBinding is:

Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive.

@HostBinding does quite the opposite of what @Input does, as @Input is meant for bringing the value into the Directive , while @HostBinding is responsible for publishing the value out (updating the DOM).

Controlled VS Uncontrolled components:

By default input fields are not controllable which means field is handled by the DOM itself, which is the source of truth. It then stores its own state internally.

Having our ngModel directive capturing input events, the DOM can no longer detect the changes itself once changes are being made, therefore, we need to take control over the field by:

1. Raising an event.
2. Updating the internal value of the field.