gpt4 book ai didi

forms - maxlength 属性的 Angular 验证消息

转载 作者:太空狗 更新时间:2023-10-29 17:13:00 25 4
gpt4 key购买 nike

我在为 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>

如果您希望我提供任何其他信息,请告诉我。

最佳答案

您可以使用 Reactive 表单来正确验证您的表单,这是一个如何使用响应式表单的简单示例:

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

}

希望对你有帮助:)

关于forms - maxlength 属性的 Angular 验证消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46667554/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com