入力タイプの属性が角の形を壊すバリデータ

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> 

これは既知のバグまたは私は間違ってバリデータを使用していますか？

Answer 1

これは

maxLengthが文字列のためにあるHTML 5で "デザインによって" です。これは、MDNのドキュメントからです：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength

type属性の値は、テキスト、電子メール、検索、 パスワード、TEL、またはURLの場合MAXLENGTHは、この属性はUnicodeコードに（ 文字の最大数を指定しますポイント）を入力することができます。他の コントロールタイプの場合は無視されます。