Here is the code snippet of the component:
@Component({
template: `
<form>
<label>Enter your name:</label>
<input #name name="name" [ngModel]="firstName" (change)="onNameChange(name.value)">
</form>
<p>Your name: {{firstName}}</p>`
})
export class AppComponent {
firstName = 'John';
onNameChange(value: string): void {
if (value == "") {
this.firstName = "John";
}
else {
this.firstName = value;
}
}
}
Even after erasing all text and leaving the input control, the default text John does not reappear. This happens because the model remains unchanged.
How can I make sure that the input control always displays the current value of the model?
For more details, check out the Plunker related to this issue.