Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型号
Posted
技术标签:
【中文标题】Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型号【英文标题】：Angular 4 Form Validators - minLength & maxLength does not work on field type number 【发布时间】：2018-02-18 03:52:55 【问题描述】：我正在尝试开发一个联系表单，我希望用户输入长度在 10-12 之间的电话号码值。
值得注意的是，同样的验证正在 Message 字段上工作，它唯一的 number 字段给我带来了麻烦。
I found this answer but it is of no use for me.
我有如下代码：
html：
<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
<input type="number" formControlName="phone" placeholder="Phone Number">
<input type="text" formControlName="message" placeholder="Message">
<button class="button" type="submit" [disabled]="!myForm.valid">Submit</button>
</form>
TS：
this.myForm = this.formBuilder.group(
phone: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(12)]],
message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(100)]]
);`
【问题讨论】：
就表单验证而言，数字没有长度。如果你想要 10-12 位数字，你真正想要的是 1,000,000,000 到 1,000,000,000,000 之间的数字，确定吗？ 是的，我需要介于 10000000000 到 999999999999 之间的数字 然后使用它，而不是尝试检查长度。 那么没有默认的方法吗？我们必须创建一个来限制这些？ 是什么让你这么说？请参阅angular.io/api/forms/Validators，它同时显示了min 和max。
【参考方案1】：
像下面这样使用它并完美地工作：
phone: ['', [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]],
customValidationService：
import AbstractControl, ValidatorFn from '@angular/forms';
export class customValidationService
static checkLimit(min: number, max: number): ValidatorFn
return (c: AbstractControl): [key: string]: boolean | null =>
if (c.value && (isNaN(c.value) || c.value < min || c.value > max))
return 'range': true ;
return null;
;
【讨论】：
我知道我在这里迟到了一年，这并不是 OP 中所要求的，但 没有人 会想输入一个电话号码<input type='number'>。 “更新 1”下的答案对于整数是正确的，但电话号码不是整数。 This 甚至不是我一直在寻找的“关于电话号码的谎言”，但它有很多优点。
但是用这个解决方案你可以在左边加零而不被控制，maxlength(10)和max(999999999)不一样-_-【参考方案2】：
您可以改用模式来验证您的电话号码，并将您的输入类型更改为文本
<input type="text" formControlName="phone" placeholder="Phone Number">
并将此模式用于长度在 10 到 12 之间的电话号码
phonePattern = /^[0-9]10,12$/;
并更改表单控件上的验证器
phone: ['', [Validators.required, Validators.pattern(this.phonePattern)]],
你可以显示错误：
<div *ngIf="myForm.get('phone').invalid">
<div class="error-message invalid-feedback" *ngIf="myForm.get('phone').hasError('required')">
required!
</div>
<div class="error-message invalid-feedback" *ngIf="myForm.get('phone').hasError('pattern')">
invalid!
</div>
</div>
【讨论】：
【参考方案3】：这个技巧会很有帮助
在.html文件中
<input type="text" (keyup)="onKeyUp($event)" formControlName="phone" placeholder="Phone Number">
在 .ts 文件中
以下代码限制字符串字符
public onKeyUp(event: any)
const NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/;
let newValue = event.target.value;
let regExp = new RegExp(NUMBER_REGEXP);
if (!regExp.test(newValue))
event.target.value = newValue.slice(0, -1);
和其他验证
phone: ['', Validators.compose([
Validators.required,
Validators.pattern('^[0-9]0,30$')])
])],
上述模式代码最多允许 30 位数字。 如果你想要最少两位数，你可以这样做
Validators.pattern('^[0-9]2,30$')
【讨论】：
当 Angular 没有它时，为什么还要使用额外的事件keyup？
我添加了keyup 事件以删除特殊字符或运算符，否则由您决定是否添加keyup 事件
使用type="number" 会删除特殊字符，不是吗？
是的，它会删除 type= number 中的特殊字符，但输入时会包含 +、-、e。如果您想在输入时限制这些运算符，请使用 keyup 事件，否则一切都很好。【参考方案4】：
保留<input type="number" /> 并将 int 值转换为字符串。
const phoneControl: FormControl = this.myForm.controls.phone;
// Do not forget to unsubscribe
phoneControl.valueChanges.subscribe(v =>
// When erasing the input field, cannot read toString() of null, can occur
phoneControl.setValue((v && v.toString()) || null, emitEvent: false );
);
【讨论】：
【参考方案5】：我有一个 100% 有效的技巧。
定义类型为“文本”而不是“数字”的输入。
例如：
<input placeholder="OTP" formControlName="OtpUserInput" type="text">
然后使用作为验证一部分的模式。
喜欢：
this.ValidOtpForm = this.formbuilder.group(
OtpUserInput: new FormControl(
value:'', disabled: false ,
[
Validators.required,
**Validators.minLength(6),
Validators.pattern('[0-9]*')**
]),
);
这意味着我们定义了适合最小长度的输入类型文本，我们还 为数值定义模式（验证），以便我们可以同时实现 验证。
剩余代码：
<mat-error *ngIf="RegistrationForm.controls['Password'].hasError('minlength')">Use 6 or more characters with a mix of letters</mat-error>
<mat-error *ngIf="ValidOtpForm.controls['OtpUserInput'].hasError('pattern')">Please enter numeric value.</mat-error>
【讨论】：
非常适合我。一个小细节是，当我们在mat-error 中声明minlength 时注意它是小写的，而在验证器中它是minLength 和大写。【参考方案6】：
如果你想通过多个验证器来验证一个字段，你应该试试这个
phone: ['', Validators.compose([
Validators.required,
Validators.minLength(10),
Validators.maxLength(12)])
])],
【讨论】：
【参考方案7】：使用Compose() 方法，将多个验证器组合成一个函数。
如下更新.TS文件，
this.myForm = this.formBuilder.group(
phone: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(12)])],
message: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(100)])]
);
【讨论】：
【参考方案8】：多个参数或多个条件的表单验证应组合为单个验证器，否则您将得到 observable 或 promise 错误：
phone: ['', Validators.compose([Validators.required,Validators.min(10000000000), Validators.max(999999999999)])],
【讨论】：
【参考方案9】：对于 number 字段，您可以使用内置的 Angular 验证来验证最小值和最大值 值，如下所示：
.ts
import FormBuilder, FormGroup, Validators from '@angular/forms';
private myNumberFieldMin: number = 1;
private myNumberFieldMax: number = 1000000;
constructor()
this.myForm = this.formBuilder.group(
myNumberField
)
this.myForm.controls.myNumberField.setValidators([
Validators.min(this.myNumberFieldMin),
Validators.max(this.myNumberFieldMax)
]);
html
<form [formGroup]="myForm">
<input type="number" formControlName="myNumberField">
<div *ngIf="this.myForm.controls['myNumberField'].errors && this.myForm.controls['myNumberField'].errors.min">
<span class="error-message">Value must be at least myNumberFieldMin</span>
</div>
<div *ngIf="this.myForm.controls['myNumberField'].errors && this.myForm.controls['myNumberField'].errors.max">
<span class="error-message">Maximum value is myNumberFieldMax</span>
</div>
</form>
【讨论】：
【参考方案10】：<div nz-col [nzXs]="24" [nzSm]="12" nz-form-control nzHasFeedback>
<nz-input formControlName="password" [nzPlaceHolder]="'password'" [nzType]="'password'" [nzSize]="'large'" (ngModelChange)="validateConfirmPassword()">
</nz-input>
<div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('minlength')">Your password must be at least 5 characters long. </div>
<div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('maxlength')">Your password cannot exceed 15 characters. </div>
<div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">Please input your password!</div>
</div>
【讨论】：
Ts 文件导入 Component, OnInit from '@angular/core';从“@angular/forms”导入 FormBuilder、FormControl、FormGroup、ReactiveFormsModule、Validators ； @Component( selector: 'ftl-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.scss'] ) 导出类 PasswordChecker 实现 OnInit validateForm: FormGroup;构造函数（私人FB：FormBuilder）密码：[''，[Validators.required，Validators.minLength（5），Validators.maxLength（15）]]，）; 您应该编辑您的答案，而不是在您自己的答案中添加 cmets。【参考方案11】：试试这个工作示例代码：
component.html
<div class="container">
<form [formGroup]="myForm"
(ngFormSubmit)="registerUser(myForm.value)" novalidate>
<div class="form-group" [ngClass]="'has-error':!myForm.controls['phone'].valid">
<label for="phone">Email</label>
<input type="phone" formControlName="phone" placeholder="Enter Phone"
class="form-control">
<p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('minlength')">
Your phone must be at least 5 characters long.
</p>
<p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('maxlength')">
Your phone cannot exceed 10 characters.
</p>
<p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('required') && myForm.controls['phone'].dirty">
phone is required
</p>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>
</div>
</form>
</div>
component.ts
import FormGroup, FormBuilder, Validators from '@angular/forms';
export class AppComponent implements OnInit
myForm: any;
constructor(
private formBuilder: FormBuilder
)
ngOnInit()
this.myForm = this.formBuilder.group(
phone: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
);
【讨论】：
【参考方案12】：你不应该在这里使用长度，因为 min 和 max 使用这样的自定义验证器，
var numberControl = new FormControl("", CustomValidators.number(min: 10000000000, max: 999999999999 ))
Angular2 min/max validators
【讨论】：
以上是关于Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型号的主要内容，如果未能解决你的问题，请参考以下文章