Fatal编程技术网
  • forms/
  • Forms 角度4形式验证器-minLength&；maxLength不适用于字段类型编号

Forms 角度4形式验证器-minLength&；maxLength不适用于字段类型编号

forms angular validation

Forms 角度4形式验证器-minLength&；maxLength不适用于字段类型编号,forms,angular,validation,angular4-forms,Forms,Angular,Validation,Angular4 Forms,我正在尝试开发一个联系人表单，我希望用户输入长度在10-12之间的电话号码值 值得注意的是，同样的验证工作在消息字段上，这是唯一一个给我带来麻烦的数字字段 我有如下代码： HTML: <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()"> <input type="number" formControlName="phone" placeholder="Phone Number"> <

我正在尝试开发一个联系人表单，我希望用户输入长度在10-12之间的电话号码值

值得注意的是，同样的验证工作在消息字段上，这是唯一一个给我带来麻烦的数字字段

我有如下代码：

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>
您不应该在这里使用长度，对于最小值和最大值，请使用这样的自定义验证器

var numberControl = new FormControl("", CustomValidators.number({min: 10000000000, max: 999999999999 }))

更新1:

phone: ['',  [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]],

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;
    };
  }
}
像下面这样使用它，效果非常好：

 phone: ['',  [Validators.required, customValidationService.checkLimit(10000000000,999999999999)]],
客户验证服务：

phone: ['',  [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]],

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

从'@angular/forms'导入{AbstractControl，ValidatorFn}；
导出类customValidationService{
静态检查限制（最小：编号，最大：编号）：验证器fn{
return（c:AbstractControl）：{[key:string]：boolean}| null=>{
如果（c.value&（isNaN（c.value）| | c.valuemax））{
返回{'range'：true}；
}
返回null；
};
}
}
尝试以下工作示例代码：

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>

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


密码长度必须至少为5个字符。
您的密码不能超过15个字符。
请输入您的密码！
对于
数字
字段，可以使用内置角度验证来验证最小值和最大值，如下所示：

.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)])]
        });
}
}

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

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

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


值必须至少为{{MyNumberFieldAdmin}}
最大值为{myNumberFieldMax}}
多个参数或多个条件的表单验证应作为单个验证器组成，否则会出现可观察或承诺错误：

phone: ['',  Validators.compose([Validators.required,Validators.min(10000000000), Validators.max(999999999999)])],
使用方法，将多个验证器组合到单个函数中

更新.TS文件如下：

this.myForm=this.formBuilder.group({
电话：[''，Validators.compose（[Validators.required，Validators.minLength（10），Validators.maxLength（12）]，
消息：[''，Validators.compose（[Validators.required，Validators.minLength（10），Validators.maxLength（100）]）

});
如果您想通过多个验证器验证字段，那么您应该尝试以下方法


phone: ['', Validators.compose([
        Validators.required, 
        Validators.minLength(10),
        Validators.maxLength(12)])
      ])],



我有一个100%有效的技巧

定义“文本”而不是“数字”类型的输入

例如：



然后使用作为验证一部分的模式

比如：


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>



在字母组合中使用6个或更多字符
请输入数值。

保留
并将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 });
});



这个技巧会有帮助

在.html文件中


 <input type="text" (keyup)="onKeyUp($event)" formControlName="phone" placeholder="Phone Number">


和其他验证


phone: ['', Validators.compose([
        Validators.required, 
         Validators.pattern('^[0-9]{0,30}$')])
      ])],


上述模式代码允许数字最多为30位。
如果你想要最少两位数，你可以这样做


 Validators.pattern('^[0-9]{2,30}$')



您可以使用模式来验证您的电话号码，并将输入类型更改为文本


<input type="text" formControlName="phone" placeholder="Phone Number">


并更改表单控件上的验证程序


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>




必修的！
无效的

就表单验证而言，数字没有长度。如果你想要10-12位数字，你真正想要的是1000000000到10000000000之间的数字，当然？是的，我需要1000000000到9999999999之间的数字，然后使用它，而不是尝试检查长度。所以没有默认方法？我们必须创造一个来限制这些？你为什么这么说？请参阅，其中显示了从“@angular/core”导入的
min
和
max
.Ts文件{Component，OnInit}；从“@angular/forms”导入{FormBuilder、FormControl、FormGroup、ReactiveFormsModule、Validators}@组件（{selector:'ftl signup'，templateUrl:'./signup.Component.html'，styleURL:['./signup.Component.scss']}）导出类密码检查器实现OnInit{validateForm:FormGroup；构造函数（私有fb:FormBuilder）{password:[''.[Validators.required，Validators.minLength（5），Validators.maxLength（15）]]，}）；}您应该编辑您的答案，而不是在自己的答案中添加注释。我知道我在这里迟到了一年，这与OP中的要求不完全一样，但没有人希望输入电话号码作为
。“更新1”下的答案对于整数是正确的，但电话号码不是整数。甚至不是我一直在寻找的“关于电话号码的谎言”这篇文章，但它有很多优点。非常好的作品对我来说非常完美。一个小细节是，当我们在
mat error
中声明
minlength
时，请注意它是小写的，在验证器中，它是大写的
minLength
。如果Angular可以不使用它，为什么还要使用额外的事件
keyup
？我添加了
keyup
事件来删除特殊字符或运算符，否则，添加
keyup
事件还是不使用
type=“number”
删除特殊字符，不是吗？是的，它会删除
type=number
中的特殊字符，但在输入时会有
+
，
-
，
e
。如果要在输入use
keyup
事件时限制这些运算符，则一切正常。