maxlength属性の角度検証メッセージ

Question

maxlength属性のエラーメッセージをAngularで表示するのに問題があります。

問題

MAXLENGTH属性が指定された量よりも多くの文字を許可していないので、私は私のエラーメッセージを表示するトラブルを抱えています。自分のエラーメッセージを表示するために、デフォルトの動作（ユーザーが複数の文字を入力できるようにする）を切り替える方法はありますか？アンギュラ検証

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

のためのテキストエリア

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

コードについて

コードは、あなたが私には、追加情報を提供したい場合は、私に知らせてください。

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

} 

が、それはuのに役立ちます願っています:)

Answer 2

あなたはでそれを達成することができます

<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

：入力の長さに直接条件を設定します