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 >
   <div >
      <label for="fiscalYear" >Fiscal Year</label>
   </div>
   <div >
      <input id="fiscalYear" name="fiscalYear" type="text"  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

CodePudding user response：

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,
    ) {

    }
}

CodePudding user response：

Try this:

in .ts

registreNational:number|undefined; 
fiscalYear number|undefined ; 
country: number |undefined

;

and add in html

<div  *ngIf="search.fiscalYear> 
    <input id="fiscalYear" name="fiscalYear" type="text"  name="fiscalYear" style="min-width: 380px" [(ngModel)]="search.fiscalYear" maxlength="10"> 
</div>