web-dev-qa-db-ja.com

Angular maxlength属性の検証メッセージ

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>

追加情報の提供を希望される場合は、お知らせください。

formsangularvalidationtextareamaxlength
8
Mathis Garberg

入力の長さで直接条件を設定することにより、それを達成できます。 * ngIfを含むspanタグは、エラーメッセージを表示/非表示できます。

HTML

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

クラス：...

  titleModel = 'I have more than 10 characters'

... [〜＃〜] demo [〜＃〜]

7
Vega

リアクティブフォームを使用してフォームを適切に検証できます。リアクティブフォームの使用方法の簡単な例を次に示します。

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

}

それがあなたを助けることを願っています:)

6
Mohamed Ali RACHID