Is there an easy way to set the value of an input blank/empty if the value equals zero (0)? I came across this AngularJS question here, Hide Value in input when it's zero in angular Js, but couldn't find anything for Angular 2+.
It would only need to be done on load of the page. I realize I could use a setter in the component, but wondering if there is something that could be put on the input itself.
Could this be done with a directive?
If you want it done on page load, you could do this:
<input type="number" (ngModelChange)="data = $event === 0 ? '' : $event" [ngModel]="data" >
This will prevent the value from ever being 0, regardless of when.
<input type="number" class="form-control" name="constructionYear" [(ngModel)]="vm?.propertyCoveragesTab.dwelling.constructionYear" #constructionYear="ngModel" required pattern="^(18|19|20)\d{2}$" maxlength="4" (ngModelChange)="vm?.propertyCoveragesTab.dwelling.constructionYear = $event === 0 ? '' : $event" /><input type="number" class="form-control" name="constructionYear" [ngModel]="vm?.propertyCoveragesTab.dwelling.constructionYear" #constructionYear="ngModel" required pattern="^(18|19|20)\d{2}$" maxlength="4" (ngModelChange)="vm?.propertyCoveragesTab.dwelling.constructionYear = $event === 0 ? '' : $event" />You could use a template variable.
checkInputValue(input) {
input.value = input.value == '0' ? '' : input.value;
}
and then
<input #input (keyup)="checkInputValue(input)" />
Edit for onload :
import { ViewChild, ElementRef, AfterViewInit } from '@angular/core'
// ...
export class Component implements AfterViewInit {
@ViewChild('input') input: ElementRef
ngAfterViewInit() {
let inputValue = this.input.nativeElement.value;
inputValue = inputValue == '0' ? '' : inputValue;
}
}
component.html rather than having logic inside the component.ts?
<input #input [value]="input.value == '0' ? '' : input.value " />To make it work on load, Modifying the ngModel would be suffice:
<input type="number" [ngModel]="data == '0' ? '' : data" >
