输入类型属性打破角度形式验证器(Input type attribute breaks angular form Validators)

输入类型属性打破角度形式验证器(Input type attribute breaks angular form Validators)

我刚刚意识到我的错误信息已经破裂，并且不知道为什么。 事实证明，添加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>

这是一个知道错误还是我错误地使用验证器？

I just realized my error messaging broke and had no idea why. It turns out that adding type="number" or any valid html type attribute, does not trigger error messages (minLength or maxLength but have not tested others).

component:

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

template:

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

Is this a know bug or am I using the Validator incorrectly?

最满意答案

这是HTML 5中的“按设计”。

maxLength用于字符串。 这来自MDN文档： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength

maxlength如果type属性的值为text，email，search，password，tel或url，则此属性指定用户可以输入的最大字符数（以Unicode代码点为单位）。 对于其他控件类型，它将被忽略。

This is "by design" in HTML 5.

maxLength is for strings. This is from the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength

maxlength If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.