angular - zamijeni broj na unosu broja ako je prevelik direktiva

Volio bih da unutar unosa, ako korisnik unese godinu uz trenutnu, brojevi budu zamijenjeni. Primjer: korisnik unese 2020., volio bih direktivu koja zamjenjuje 2020. s trenutnom godinom (2018.).

moj HTML kod:

<ion-item>
  <ion-label>year</ion-label>
  <ion-input type="number" [(ngModel)]="libro.year" name="data"></ion-input>
</ion-item>

Odgovor #1

Koristite direktiv za manipulaciju DOM-om. Direktiva dobiva DOM element na koji je "pridružena" i poboljšava ga s nekim vrstama značajki.
Koristite Pipe za manipulaciju podacima. Pipe prima podatke kao ulaz, transformira ih i ispisuje te podatke na drugi način.

Dakle, to je savršen slučaj upotrebe za Pipe

<ion-item>
      <ion-label>Anno</ion-label>
      <ion-input type="number" [ngModel]="libro.year|replace" (ngModelChange)="setYear($event)" name="data"></ion-input>
    </ion-item>
</ion-content>

Cijev

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'replace'
})
export class ReplacePipe implements PipeTransform {

  transform(value: any): any {
      if(parseInt(value)>2018)
        return '2018';
         return value;
  }

}

page.ts

setYear(event)
{
  this.year.libro=event;
}

UŽIVO DEMO

Odgovor #2

Probaj ovo.

U vašem component.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

public form: FormGroup;

constructor(private fb: FormBuilder) { 
    this.form = this.fb.group({
      year: [2018, Validators.required],
    }, {validator: this.validateField('year')});
}

private validateField(controllerName: string) {
    return (group: FormGroup) => {
      const nameFiled = group.controls[controllerName];
      if (nameFiled.value > new Date().getFullYear()) {
        nameFiled.setValue(new Date().getFullYear());
        return nameFiled.setErrors({invalidYear: true});
      } else {
        return nameFiled.setErrors(null);
      }
    };
}

U vašem predlošku.

<form [formGroup]="form">
  <ion-item>
      <ion-label>Anno</ion-label>
      <ion-input type="number" formControlName="year" name="data"></ion-input>
  </ion-item>
</form>

Napravio sam stackblitz za ovo. Pogledaj početnu stranicu.