我有一个带有表单的angular4应用程序。在这个我输入一个百分比。所以,我想用0到100之间的值来阻止输入。
我尝试添加min="0"
和max="100"
,但我仍然可以输入高于100或小于0的数字。
模板
<md-input-container>
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
name="rateInput">
<md-error>Required field</md-error>
</md-input-container>
你知道我怎么做吗?
答案 0 :(得分:20)
我成功使用了表单控件。 这是我的HTML代码:
<md-input-container>
<input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl">
<md-error>Please enter a value between 0 and 100</md-error>
</md-input-container>
在我的打字稿代码中,我有:
this.rateControl = new FormControl("", [Validators.max(100), Validators.min(0)])
因此,如果我们输入的值大于100或小于0,则材料设计输入变为红色且该字段未验证。所以之后,如果值不好,我点击保存按钮时就不保存。
答案 1 :(得分:4)
实际上当你使用type =&#34; number&#34;您的输入控件使用向上/向下箭头填充以增加/减少数值,因此当您使用这些按钮更新文本框值时,不会超过100 ,但当您手动提供120/130等输入时,不会验证最大限制,因此您必须按代码验证。< / p>
您可以禁用手动输入,或者您必须在valueChange / textChange / key *事件上编写一些代码。
答案 2 :(得分:4)
以下是解决方案:
这是一种破解,但它会起作用
<input type="number"
placeholder="Charge"
[(ngModel)]="rateInput"
name="rateInput"
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
required
#rateInput2 = "ngModel">
<div *ngIf="rateInput2.errors && (rateInput2.dirty || rateInput2.touched)"
<div [hidden]="!rateInput2.errors.pattern">
Number should be between 0 and 100
</div>
</div>
以下是plunker的链接,请查看。
答案 3 :(得分:1)
我用 ngModelChange 做了一个解决方法。在我的情况下,我想避免用户设置比当年早一年。在 html 中
<div class="col">
<label>Year<span *ngIf="yearInvalid" class="badge badge-danger ml-1"> Year is invalid</span></label>
<input class="form-control" type="number" id="year" name="year" #year="ngModel"
[(ngModel)]="projection.year" required pattern="(?:19|20)[0-9]{2}"
(ngModelChange)="checkYear($event)" />
</div>
在 angular 中,我只检查模型更改:
checkYear(e) {
if (e < new Date().getFullYear()) {
this.yearInvalid = true;
}
else {
this.yearInvalid = false;
}
}
我认为它可以很好地处理 0-100 或您需要执行的任何其他检查。
答案 4 :(得分:0)
只需在angular2 +中添加(onkeypress)即可完成
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
(onkeypress)="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
name="rateInput">
在Angular 7上测试
答案 5 :(得分:0)
您可以编写一条指令来侦听输入上的更改事件,如果该值太小,则将其重置为最小值。 StackBlitz
@HostListener('change') onChange() {
const min = +this.elementRef.nativeElement.getAttribute('min');
if (this.valueIsLessThanMin(min, +this.elementRef.nativeElement.value)) {
this.renderer2.setProperty(
this.elementRef.nativeElement,
'value',
min + ''
);
}
}
在设置表单值时,还监听 ngModelChange 事件以执行相同的操作。
@HostListener('ngModelChange', ['$event'])
onModelChange(value: number) {
const min = +this.elementRef.nativeElement.getAttribute('min');
if (this.valueIsLessThanMin(min, value)) {
const formControl = this.formControlName
? this.formControlName.control
: this.formControlDirective.control;
if (formControl) {
if (formControl.updateOn === 'change') {
console.warn(
`minValueDirective: form control ${this.formControlName.name} is set to update on change
this can cause issues with min update values.`
);
}
formControl.reset(min);
}
}
}
完整代码:
import {
Directive,
ElementRef,
HostListener,
Optional,
Renderer2,
Self
} from "@angular/core";
import { FormControlDirective, FormControlName } from "@angular/forms";
@Directive({
// tslint:disable-next-line: directive-selector
selector: "input[minValue][min][type=number]"
})
export class MinValueDirective {
@HostListener("change") onChange() {
const min = +this.elementRef.nativeElement.getAttribute("min");
if (this.valueIsLessThanMin(min, +this.elementRef.nativeElement.value)) {
this.renderer2.setProperty(
this.elementRef.nativeElement,
"value",
min + ""
);
}
}
// if input is a form control validate on model change
@HostListener("ngModelChange", ["$event"])
onModelChange(value: number) {
const min = +this.elementRef.nativeElement.getAttribute("min");
if (this.valueIsLessThanMin(min, value)) {
const formControl = this.formControlName
? this.formControlName.control
: this.formControlDirective.control;
if (formControl) {
if (formControl.updateOn === "change") {
console.warn(
`minValueDirective: form control ${
this.formControlName.name
} is set to update on change
this can cause issues with min update values.`
);
}
formControl.reset(min);
}
}
}
constructor(
private elementRef: ElementRef<HTMLInputElement>,
private renderer2: Renderer2,
@Optional() @Self() private formControlName: FormControlName,
@Optional() @Self() private formControlDirective: FormControlDirective
) {}
private valueIsLessThanMin(min: any, value: number): boolean {
return typeof min === "number" && value && value < min;
}
}
请确保在表单控件设置为 updateOn 模糊的情况下使用此功能,否则,如果第一位数字低于最小值,则用户将无法输入+1位数字。
this.formGroup = this.formBuilder.group({
test: [
null,
{
updateOn: 'blur',
validators: [Validators.min(5)]
}
]
});
答案 6 :(得分:0)
[我认为读者具有Angular2 +和Forms的基本知识]
显示数字输入和设置限制很容易,但是您还必须注意预测中可能发生的事情。
<input type="number" [min]="0.00" [max]="100.00" [step]="0.01" formControlName="rateFC">
import { FormGroup, FormControl, Validators } from '@angular/forms';
//many other things...
this.myFG = new FormGroup({
//other form controls...,
rateFC : new FormControl(0, [Validators.min(0), Validators.max(100)])
});
.form-control.ng-touched.ng-invalid{
border:2px solid red;
}
<button type="submit" [disabled]="!myFG.valid">Submit</button>
答案 7 :(得分:0)
如果输入在您的范围内,或者不在您分配的0范围内,则可以通过更改事件进行控制。
<md-input-container>
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
(change)= "rateInput < 0 ? rateInput = 0 : rateInput; rateInput > 100 ? rateInput = 0 : rateIntput;"
name="rateInput">
<md-error>Required field</md-error>
</md-input-container>
答案 8 :(得分:0)
在模板驱动的表单中,用于最小/最大验证而不使用反应式表单和构建任何指令的最简单方法是使用html的pattern属性。这已经被解释并在这里回答请看 https://stackoverflow.com/a/63312336/14069524
答案 9 :(得分:-4)
如果要验证长度,请改用s=df.time.diff().fillna(1).ne(1).cumsum()
s.groupby(s).transform('size')
Out[396]:
0 3
1 3
2 3
3 2
4 2
5 1
6 1
Name: time, dtype: int32
和minLength
。