maxlength 属性的角度验证消息答案

【问题标题】：Angular validation message for maxlength attributemaxlength 属性的角度验证消息
【发布时间】：2018-03-21 21:48:53
【问题描述】：

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

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

【问题讨论】：

title.errors 中的标题是什么？你在某处声明过吗？..
title 指的是 textarea 的 ngModel。我忘记输入该信息了。
您是否在表单标签中使用了“novalidate”属性？
如果您使用 maxlength ，您将不需要显示错误消息，因为您不允许写入超过 10 个字符，我认为即使输入包含更多字符，title.errors 也不会包含任何错误除了 maxLength ，你可以使用响应式表单来验证你的表单控件。
title.errors.maxlength 工作正常。我加载到我的应用程序中的一些内容已经包含了 10 多个字符。当我删除一个时，我会收到消息。问题是该属性不允许我输入更多内容。我想显示错误消息，以便用户理解为什么不允许他们输入超过指定的限制。

标签： forms angular validation textarea maxlength

【解决方案1】：

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

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

}

希望对你有帮助:)

【讨论】：

【解决方案2】：

可以通过直接在输入的长度上设置条件来实现。带有 *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

【讨论】：

快速简单的修复。喜欢它。
这个答案不允许用户输入更多的字符，所以没有解决原来的问题。
我想让用户输入比最大验证长度更多的字符，并对此做出反应（禁用提交并显示错误）。 Mohamed 在下面的回答帮助我实现了这一目标。
@Koja 1. 如果删除 mxLength，您将能够实现它 2. 问题明确使用 ngModel 而不是反应形式！所以我的回答更合适
@Koja，我的回答是针对特定设置，不涉及任何形式。如果您需要对表单进行验证，那么反应式表单当然提供了所有工具，我说去吧。 OP 没有反应形式，但有 ngModel，我提供了一个解决问题的答案，他们接受了这个答案