输入类型属性打破角度形式验证程序

Question

我刚刚意识到我的错误消息打破，并不知道为什么。事实证明，添加type =“number”或任何有效的html类型属性，不会触发错误消息（minLength或maxLength，但尚未测试其他人）。

组件：

createForm() { 
this.shortForm = this.fb.group({ 
    firstName: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50) ]], 
    lastName: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]], 
    primaryAddrZip: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)] ]  
}) 

模板：

<md-input-container> 
    <input 
     type="number" 
     formControlName="primaryAddrZip" 
     mdInput placeholder="Zip code" 
     data-testing="zip" 
     (keypress)="numbersOnlyValidation($event, 'zip'); maxLength($event, 5)" 
     (paste)="$event.preventDefault()" 
    > 
    <md-error data-testing="zip-req" *ngIf="shortForm.get('primaryAddrZip').hasError('required') && shortForm.get('primaryAddrZip').touched"> 
     Zip code is required 
    </md-error> 
    <md-error data-testing="zip-min-five-digits" *ngIf="shortForm.get('primaryAddrZip').hasError('minlength') && shortForm.get('primaryAddrZip').touched"> 
     Minimum of 5 characters . <!--WILL NOT TRIGGER--> 
    </md-error> 
    </md-input-container> 

这是一个知道是不是BUG还是我使用不当验证？

Answer 1

这是 “设计”，在HTML 5

maxLength是字符串。这是从MDN文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength

最大长度如果type属性的值是文本，电子邮件，搜索， 密码，电话或网址，该属性指定的 最大字符数（Unicode码点），用户可以输入。对于其他 控制类型，它将被忽略。