最大长度属性的角度验证消息

我在为Angular中的maxlength属性显示错误消息时遇到了一些麻烦。最大长度属性的角度验证消息

问题

由于maxlength属性不允许的字符数大于指定金额，我有我的显示错误消息的麻烦。有什么方法可以打开默认行为（允许用户键入更多字符），以显示我的错误消息。

代码的textarea

<textarea maxlength="10" 
      [(ngModel)]="title.value" 
      #title="ngModel"></textarea>

守则角验证

<div *ngIf="title.errors && (title.dirty || title.touched)" 
     class="alert alert-danger"> 
    <div [hidden]="!title.errors.maxlength"> 
     Only 10 characters allowed. 
    </div> 
</div>

如果你要我提供任何其他信息，请让我知道。

来源

2017-10-10 Mathis Garberg

'title.errors'中的标题是什么？你是否在某个地方宣布过？ –

标题参考了textarea的ngModel。我忘了输入这些信息。 –

您在表单标记中使用了“novalidate”属性吗？ – Sergaros

你可以用反应形式工作，以正确验证表单，这里是一个简单的例子，如何使用活性形式：

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

}

希望它有助于ü:)

来源

2017-10-10 14:04:08

您可以通过它实现直接设置条件对输入的长度：

<textarea class="form-control" id="title" maxlength="10" 
type="number" name="title" [(ngModel)]="titleModel"></textarea> 
<span style="color:red" *ngIf="titleModel?.length > 10"> 
     10 max 
</span>

DEMO

来源

2017-10-10 14:49:48 Vega

另外，请查看：https://stackoverflow.com/a/46026509/5468463 – Vega

快速简单的修复。爱它。 –

最大长度属性的角度验证消息

回答

相关问题