輸入類型屬性打破角度形式驗證程序

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碼點），用戶可以輸入。對於其他 控制類型，它將被忽略。