the value 0 is displayed in an input, how to remove it? - html

Question

I would like to remove the value 0 in the field Fiscal Year
illustration
search-dta.ts
export class SearchDta {
registreNational: number;
fiscalYear: number;
country: number;
constructor(
registreNational: number = 0,
fiscalYear: number = 0,
country: number = 0,
) {
this.registreNational = registreNational;
this.fiscalYear = fiscalYear;
this.country = country
}
}
search-dta.component.html
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="fiscalYear" class="form-label">Fiscal Year</label>
</div>
<div class="col-4">
<input id="fiscalYear" name="fiscalYear" type="text" class="form-control" name="fiscalYear"
style="min-width: 380px" [(ngModel)]="search.fiscalYear" maxlength="10">
</div>
</div>
search-dta.component.ts
export class SearchDtaComponent implements OnDestroy {
private unsubscribe$ = new Subject < void > ();
#Input() mode: string = "";
#Input() title: string = "";
#Input() canSelectAllTitles: boolean = false;
#Input() showWarnings: boolean = false;
#Input() disabledSvm: number[] = [];
#Input() saveState: Observable < string > = new Observable < string > ();
#Input() url: string = '';
#Input() from ? : string;
isModal: boolean = false;
markets$ = this.service.markets$;
search: SearchDta = new SearchDta();
data ? : SearchDtaResponse;
countries: Country[] = [];
#Output() selectedPersonnePhysiqueDta = new EventEmitter < PersonnePhysiqueDta | undefined > ();
#Output() changedState = new EventEmitter < SearchDta > ();
constructor(private service: SearchDtaService, private modalService: BsModalService, private router: Router) {}
ngOnInit() {
this.saveState.subscribe((url) => localStorage.setItem(url + '.search', JSON.stringify(this.search)));
const search = localStorage.getItem(this.url + '.search');
if (search) {
this.search = JSON.parse(search);
localStorage.removeItem(this.url + '.search')
}
this.service.getPaysDta().pipe(
takeUntil(this.unsubscribe$)
).subscribe((countries) => this.countries = countries);
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
submit(): void {
if (!this.isModal) {
const modalRef = this.modalService.show(SearchDtaResultModalComponent, {
...SEARCH_TITLE_MODAL_OPTIONS,
initialState: {
title: this.title,
isLoading: true,
disabledSvm: this.disabledSvm,
showWarnings: this.showWarnings
}
});
modalRef.content!.selectedPersonnePhysiqueDta.pipe(
takeUntil(this.unsubscribe$)
).subscribe((val: PersonnePhysiqueDta | undefined) => {
this.selectPersonnePhysiqueDta(val);
if (this.mode === 'create') {
this.router.navigate([
"/dta/create/" +
val?.NUMEROREGISTRENATIONAL +
"/" +
this.search.country +
"/" +
this.search.fiscalYear
]);
} else if (this.mode === 'delete') {
this.router.navigate([
"/dta/delete/" +
val?.NUMEROREGISTRENATIONAL +
"/" +
this.search.country +
"/" +
this.search.fiscalYear
]);
} else {
this.router.navigate([
"/dta/follow-up/" +
val?.NUMEROREGISTRENATIONAL +
"/" +
this.search.country +
"/" +
this.search.fiscalYear
]);
}
modalRef?.hide();
});
this.searchDta(true).pipe(
takeUntil(modalRef.content!.selectedPersonnePhysiqueDta)
).subscribe(res => {
if (modalRef) {
modalRef.content!.isLoading = false;
modalRef.content!.personnePhysique = res.DTA.PP;
if (!res.DTA.PP) {
modalRef.hide();
}
}
});
} else {
this.searchDta(false).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
this.data = res;
});
}
}
private searchDta(hideLoading: boolean): Observable < SearchDtaResponse > {
return this.service.searchDta(this.search, hideLoading).pipe(
takeUntil(this.unsubscribe$)
);
}
selectPersonnePhysiqueDta(personnePhysiqueDta: PersonnePhysiqueDta | undefined = undefined): void {
this.selectedPersonnePhysiqueDta.emit(personnePhysiqueDta);
}
changeState(): void {
this.changedState.emit(this.search);
}
}
How can I remove the 0?
Thank you very much

Answer 1

Try this:
in .ts
registreNational:number|undefined;
fiscalYear number|undefined ;
country: number |undefined
;
and add in html
<div class="col-4" *ngIf="search.fiscalYear>
<input id="fiscalYear" name="fiscalYear" type="text" class="form-control" name="fiscalYear" style="min-width: 380px" [(ngModel)]="search.fiscalYear" maxlength="10">
</div>

Answer 2

you're setting fiscalYear to 0 and binding that value to the input. you need to not set it to 0 if you don't want it to show 0
export class SearchDta {
constructor(
public registreNational: number = 0,
public fiscalYear: number | null = null,
public country: number = 0,
) {
}
}