我在显示Angular中maxlength属性的错误消息时遇到一些麻烦。
问题
由于maxlength属性不允许的字符数超过指定的数量,因此我无法显示错误消息。有没有办法改变默认行为(允许用户键入更多字符),以便显示我的错误消息。
文本区域代码
<textarea maxlength="10"
[(ngModel)]="title.value"
#title="ngModel"></textarea>
Angular验证代码
<div *ngIf="title.errors && (title.dirty || title.touched)"
class="alert alert-danger">
<div [hidden]="!title.errors.maxlength">
Only 10 characters allowed.
</div>
</div>
如果您希望我提供任何其他信息,请告诉我。
您可以通过直接在输入长度上设置条件来实现。带* ngIf的span标签可以显示/隐藏错误消息:
HTML
<textarea class="form-control" id="title"
type="number" name="title" [(ngModel)]="titleModel"></textarea>
<span style="color:red" *ngIf="titleModel?.length > 10">
10 max
</span>
类别:...
titleModel = 'I have more than 10 characters'
...DEMO
您可以使用反应性表单来正确验证您的表单,这是一个简单的示例,如何使用反应形式:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'title-form',
template: `
<form novalidate [formGroup]="myForm">
<label>
<span>Full title</span>
<input type="text" placeholder="title.." formControlName="title">
</label>
<div*ngIf="myForm.controls['title'].touched && myForm.get('title').hasError('required')">
Name is required
</div>
<div *ngIf="myForm.controls['title'].touched && myForm.controls['title'].hasError('maxlength')">
Maximum of 10 characters
</div>
</form>
`
})
export class TitleFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
title: ['', [Validators.required, Validators.maxLength(10)]],
});
}
}
希望它对您有帮助:)