add required validators for url and route fields - dev only

This commit is contained in:
Alex Martzios 2022-01-11 13:15:37 +02:00
parent 97fc6f033a
commit b5330f3bf6
4 changed files with 14 additions and 11 deletions

View File

@ -106,11 +106,11 @@
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name" placeholder="Write a name"></div>
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type" [options]="getTypeOptions()"></div>
<!-- Workflow for EXTERNAL -->
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" type="URL" label="URL *" placeholder="Write a URL"></div>
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" [validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div>
<!-- Workflow for INTERNAL -->
<div *ngIf="menuItemForm.get('type').value === 'internal'">
<div class="uk-text-center">Select one of the pages</div>
<div dashboard-input [formInput]="menuItemForm.get('route')" type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages" [showOptionsOnEmpty]="false">
<div dashboard-input [formInput]="menuItemForm.get('route')" [validators]="menuItemForm.get('route').validator" type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages" [showOptionsOnEmpty]="false">
</div>
<div class="uk-text-center uk-margin-top">Or <a (click)="newPageWindow()">create a new one</a></div>
<div *ngIf="newPageWindowOpen" class="uk-card uk-card-default uk-card-body uk-margin-top">

View File

@ -212,13 +212,15 @@ export class MenuComponent implements OnInit {
this.typeSub = this.menuItemForm.get('type').valueChanges.subscribe(value => {
setTimeout(() => {
// console.log(value);
this.menuItemForm.controls['route'].clearValidators();
this.menuItemForm.controls['url'].clearValidators();
if(value === "internal") {
this.menuItemForm.controls['route'].setValidators([Validators.required]);
this.menuItemForm.controls['route'].updateValueAndValidity();
} else if(value === "external") {
this.menuItemForm.controls['url'].setValidators([Validators.required]);
this.menuItemForm.controls['url'].updateValueAndValidity();
this.menuItemForm.controls['url'].setValidators([Validators.required, StringUtils.urlValidator()]);
}
this.menuItemForm.controls['route'].updateValueAndValidity();
this.menuItemForm.controls['url'].updateValueAndValidity();
}, 0);
});
}
@ -243,8 +245,8 @@ export class MenuComponent implements OnInit {
_id: this._fb.control(menuItem['_id']),
title: this._fb.control(menuItem.title,Validators.required),
type: this._fb.control(menuItem['type'],Validators.required),
route: this._fb.control(menuItem.route),
url: this._fb.control(menuItem.url),
route: this._fb.control(menuItem.route, (menuItem['type'] == "internal") ? [Validators.required] : []),
url: this._fb.control(menuItem.url, (menuItem['type'] == "external") ? [Validators.required, StringUtils.urlValidator()] : []),
parentItemId: this._fb.control(menuItem['parentItemId'])
});
this.isChild = isChild;

View File

@ -136,7 +136,7 @@
type="text" placeholder="Write a name"
label="Page Name">
</div>
<ng-template [ngIf]="isPortalAdministrator">
<ng-container *ngIf="isPortalAdministrator">
<div dashboard-input [formInput]="pageForm.get('type')"
type="select" placeholder="Choose a page Type"
label="Type" [options]="typeOptions">
@ -171,7 +171,7 @@
By disabling a position, all contents in this position will be deleted.
</label>
</div>
</ng-template>
</ng-container>
</form>
</modal-alert>

View File

@ -200,7 +200,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
@Input() panelWidth: number = 300;
@Input() panelClass: string = null;
@Input() showOptionsOnEmpty: boolean = true;
@Input() validators: ValidatorFn[];
@Input() validators: ValidatorFn[] | ValidatorFn;
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
/** LogoUrl information */
public secure: boolean = true;
@ -229,7 +229,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
}
ngOnChanges(changes: SimpleChanges) {
if (changes.formControl) {
if (changes.formControl || changes.validators) {
this.reset();
}
}
@ -346,6 +346,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
resetSearch(event: any) {
event.stopPropagation();
this.searchControl.setValue('');
this.formControl.markAsDirty(); // TODO check - should it also become dirty on addition?
this.formControl.setValue(null);
}
}