最大長度屬性的角度驗證消息

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

快速簡單的修復。愛它。 –

最大長度屬性的角度驗證消息

回答

相關問題