角度形式:如何避免验证错误消息的多个 NgIf div?

Question

我想简化下面的代码：

<div *ngIf="form1.errors?.checkDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger">
Date can't be in the future.
</div>
<div *ngIf="form1.errors?.notAfterDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger">
Birth Date must be after 1/1/1800.
</div>

它应该只有 1div *ngif并将错误消息作为值传递，而不是硬编码或使用ngFor？

非常感谢对此的任何帮助。谢谢。

Answer 1

管理多个 Angular Form 验证消息的常用技术是将它们存储在地图中。

public validationMessages = {
'firstName': [
{ type: 'required', message: 'First Name is required' },
{ type: 'maxlength', message: 'First Name may only contain 5 characters.' }
],
'lastName': [
{ type: 'required', message: 'Last Name is required' },
{ type: 'pattern', message: 'Last Name may not be "Smith".' }
],
'email': [
{ type: 'required', message: 'Email is required' },
{ type: 'email', message: 'Enter a valid email' }
]
}

网页模板

在模板中，使用NgFor循环访问所需窗体控件的验证消息。

<label>
Email:
<input type="email" autocomplete="email" formControlName="email" required>
</label>
<!-- Validation Errors -->
<div *ngFor="let validation of validationMessages.email">
<div *ngIf="profileForm.get('email').hasError(validation.type) && (profileForm.get('email').dirty || profileForm.get('email').touched)">
<small style="color:red;">{{validation.message}}</small>
</div>
</div>

例

查看堆栈闪电战演示

Answer 2

我喜欢有一个错误组件。

@Component({
selector: 'app-error',
template: `
<small class="form-text text-danger" *ngIf="(control.touched || control.dirty)
&& control.invalid && (error?control.errors[error]:true)" >
<ng-content></ng-content>
</small>`
})
export class ErrorComponent {
@Input('controlName') controlName: string;
@Input('error') error: string
@Input('control') control:any
visible: boolean = false;
constructor(@Optional() @Host() public form: FormGroupDirective) { }
ngOnInit() {
if (this.form) {
this.control = this.form.form.get(this.controlName) as FormControl
}
}
}

您可以在 formGroup 中使用，使用controlName输入来指示控件，如果您有多个验证者并希望区分，则可以error输入

<form [formGroup]="form">
<input formControlName="email">
<app-error controlName="email" error="required">Email required.</app-error>
<app-error controlName="email" error="email">incorrect email </app-error>
</form>
form=new FormGroup({
email:new FormControl('',[Validators.required,Validators.email])
})

或独立使用[control]输入来指示控件

<input [formControl]="control">
<app-error [control]="control">control required</app-error>
control=new FormControl('',Validators.required)

查看堆栈闪电战演示