Angular maxlength 属性的验证消息

Question

我在显示 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>

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

Answer 1

您可以使用 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)]],
    });
  }

}

希望对你有帮助:)

Answer 2

直接在输入的长度上设置条件即可实现。带有 *ngIf 的 span 标签可以 show/hide 错误信息：

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>

Class: ...

  titleModel = 'I have more than 10 characters'

... DEMO

Angular maxlength 属性的验证消息

Angular validation message for maxlength attribute

forms

validation

textarea

maxlength

angular