[英]Angular2 Forms Validation Error messages
我是Angular和JavaScript的新手,我嘗試使用Materialize庫(data-error屬性)在用戶輸入錯誤時添加消息。 所以我的html組件看起來像這樣:
<input
type="text"
id="username"
formControlName="username"
[class.valid]="username?.valid && username.dirty"
[class.invalid]="!username?.valid && username.dirty && !username.pending"
>
<label for="username"
data-error="ERROR_MESSAGE" // <-- this is what I need to work
>Username</label>
我想根據當前錯誤更改data-error屬性。 現在,它將在出現任何錯誤時打印“ ERROR_MESSAGE”。 我試着編寫一個函數並將其與[attr.data-error]綁定,如下所示:
displayUsernameErrorMessage() {
let message = '';
let usernameError = this.username.errors;
if(usernameError.pattern){
message = "Invalid Username"
console.log(usernameError);
}
else {
return null;
}
}
我認為我的工作做得很糟糕,該功能在控制台中的日志記錄為10次,這是一個糟糕的解決方案。 任何有關如何使其更好地工作的想法都將受到贊賞!
編輯1:其他信息是我想根據錯誤顯示不同的消息。 因此,如果從Validator.pattern收到錯誤消息-我希望該消息類似於“無效的用戶名”,或者是來自Validators.required-“請插入用戶名”,則類似這樣。
這就是我的做法(適應您的示例):
<form name="nameForm" [formGroup]="nameForm">
<fieldset>
<label for="username">Username</label>
<input
required
id="username"
formControlName="username"
>
<span
class="text-danger"
[hidden]="nameForm.controls.name.valid || itemForm.controls.name.pristine"
>
<small>{{'Please enter your name'}}</small>
</span>
</fieldset>
</form>
在您的TS文件中:
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
export class InputComponent {
public nameForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.nameForm = this.formBuilder.group({
username: new FormControl('', Validators.required),
});
}
//... codes..
}
您可以在其中自定義CSS
(或任何其他替代文件)中的text-danger
我也需要做這樣的事情,所以我最終寫了一條可以放在<label>
元素上的指令。
在您的示例中,它看起來像這樣:
<label for="username" errorMessageForFormControl>Username</label>
<input required id="username" formControlName="username">
我想避免重復兩次控件名稱,因此該指令查看for
屬性的值並從中查找控件。 如果您的FormControls和<input>
字段ID恰好不匹配,則可以自己進行設置。
<label for="somethingDifferent" errorMessageForFormControl="username">Username</label>
<input required id="somethingDifferent" formControlName="username">
該指令最終看起來像這樣:
import { Directive, Host, HostBinding, Input, Optional, OnInit, SkipSelf } from '@angular/core';
import { AbstractControl, ControlContainer } from '@angular/forms';
@Directive({
selector: '[errorMessageForFormControl]'
})
export class errorMessageDirective implements OnInit {
@HostBinding('class.validation-error') validationErrorCssClass = false;
@HostBinding('attr.data-error') errorMessage: string = null;
@Input() public errorMessageForFormControl: string;
@Input() public for: string;
private ctrl: AbstractControl = null;
constructor(
@Optional() @Host() @SkipSelf()
private controlContainer: ControlContainer
) { }
public ngOnInit(): void {
if (!this.controlContainer) {
return;
}
const formControlName = this.errorMessageForFormControl || this.for;
if (formControlName) {
this.ctrl = this.controlContainer.control.get(formControlName);
}
if (this.ctrl) {
this.ctrl.statusChanges.subscribe(statusText => {
if (statusText === 'INVALID') {
// invalid
const errors = this.ctrl.errors;
if (errors) {
const errKey = Object.keys(errors)[0];
const errVal = errors[errKey];
this.errorMessage = errVal === true ? errKey : errVal;
} else {
this.errorMessage = 'validation failed';
}
this.validationErrorCssClass = true;
} else {
// valid
this.errorMessage = null;
this.validationErrorCssClass = false;
}
});
}
}
}
您可以在某些CSS中引用data-error屬性
[data-error].validation-error::after {
color:red;
content: attr(data-error);
opacity: 0.8;
font-weight: bold;
font-style: italic;
font-size: 0.75em;
margin-right: 0.25em;
z-index: 99;
float: right;
transform: translateY(85%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.