如果指令太高,请替换输入数字上的数字

时间:2018-06-18 16:29:19

标签: angular typescript ionic-framework input numbers

如果用户输入除当前用户之外的一年,我希望在输入中输入数字。 例如:用户输入2020,我想要一个用当年(2018年)取代2020的指令。

我的HTML代码:

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

2 个答案:

答案 0 :(得分:1)

使用directive进行DOM操作。 一个指令获得了一个DOM元素&#34;附加&#34;通过某种功能来增强它 使用Pipe来操纵数据。 pipe将数据作为输入,转换并以另一种方式输出此数据。

因此,它是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>

<强>管

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;
}

<强> LIVEDEMO

答案 1 :(得分:0)

试试这个。

在你的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);
      }
    };
}

在你的模板中。

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

我为此创建了stackblitz。查看主页。