如果用户输入除当前用户之外的一年,我希望在输入中输入数字。 例如:用户输入2020,我想要一个用当年(2018年)取代2020的指令。
我的HTML代码:
<ion-item>
<ion-label>year</ion-label>
<ion-input type="number" [(ngModel)]="libro.year" name="data"></ion-input>
</ion-item>
答案 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。查看主页。