mirror of https://github.com/Squidex/squidex.git
Sebastian
10 years ago
26 changed files with 264 additions and 170 deletions
@ -0,0 +1,7 @@ |
|||
<div class="errors-box" *ngIf="errorMessages" [@fade]> |
|||
<div class="errors"> |
|||
<span *ngFor="let message of errorMessages"> |
|||
{{message}} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,2 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
@ -0,0 +1,118 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { ChangeDetectorRef, ChangeDetectionStrategy, Component, Host, Input, OnChanges, OnInit, OnDestroy, Optional } from '@angular/core'; |
|||
import { AbstractControl, FormGroupDirective } from '@angular/forms'; |
|||
import { Subscription } from 'rxjs'; |
|||
|
|||
import { fadeAnimation } from './animations'; |
|||
|
|||
const DEFAULT_ERRORS: { [key: string]: string } = { |
|||
required: '{field} is required.', |
|||
pattern: '{field} does not follow the pattern.', |
|||
patternMessage: '{message}', |
|||
minValue: '{field} must be larget than {minValue}.', |
|||
maxValue: '{field} must be larget than {maxValue}.', |
|||
minLength: '{field} must have more than {minLength} characters.', |
|||
maxLength: '{field} cannot have more than {maxLength} characters.', |
|||
validNumber: '{field} is not a valid number.', |
|||
validValues: '{field} is not a valid value.' |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-control-errors', |
|||
styleUrls: ['./control-errors.component.scss'], |
|||
templateUrl: './control-errors.component.html', |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class ControlErrorsComponent implements OnChanges, OnInit, OnDestroy { |
|||
private formSubscription: Subscription; |
|||
private displayFieldName: string; |
|||
private control: AbstractControl; |
|||
|
|||
@Input() |
|||
public for: string; |
|||
|
|||
@Input() |
|||
public fieldName: string; |
|||
|
|||
@Input() |
|||
public errors: string; |
|||
|
|||
@Input() |
|||
public submitted: boolean; |
|||
|
|||
public errorMessages: string[]; |
|||
|
|||
constructor(@Optional() @Host() private readonly form: FormGroupDirective, |
|||
private readonly changeDetector: ChangeDetectorRef |
|||
) { |
|||
if (!this.form) { |
|||
throw new Error('control-errors must be used with a parent formGroup directive'); |
|||
} |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
if (this.fieldName) { |
|||
this.displayFieldName = this.fieldName; |
|||
} else if (this.for) { |
|||
this.displayFieldName = this.for.substr(0, 1).toUpperCase() + this.for.substr(1); |
|||
} |
|||
|
|||
this.update(); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.formSubscription.unsubscribe(); |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.control = this.form.form.controls[this.for]; |
|||
|
|||
this.formSubscription = |
|||
this.form.form.statusChanges.merge(this.control.statusChanges) |
|||
.subscribe(_ => { |
|||
this.update(); |
|||
}); |
|||
} |
|||
|
|||
private update() { |
|||
if (!this.control) { |
|||
return; |
|||
} |
|||
|
|||
if (this.control.invalid && (this.control.touched || this.form.form.touched)) { |
|||
const errors: string[] = []; |
|||
|
|||
for (let key in <any>this.control.errors) { |
|||
if (this.control.errors.hasOwnProperty(key)) { |
|||
let message: string = (this.errors ? this.errors[key] : null) || DEFAULT_ERRORS[key]; |
|||
let properties = this.control.errors[key]; |
|||
|
|||
for (let property in properties) { |
|||
if (properties.hasOwnProperty(property)) { |
|||
message = message.replace('{' + property + '}', properties[property]); |
|||
} |
|||
} |
|||
|
|||
message = message.replace('{field}', this.displayFieldName); |
|||
|
|||
errors.push(message); |
|||
} |
|||
} |
|||
|
|||
this.errorMessages = errors.length > 0 ? errors : null; |
|||
} else { |
|||
this.errorMessages = null; |
|||
} |
|||
|
|||
this.changeDetector.markForCheck(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue