Question

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

我的HTML代码：

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

Answer 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

Answer 2

试试这个。

在你的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。查看主页。

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

2 个答案: