Skip to content
Snippets Groups Projects
Commit e8c90d13 authored by Florent Poittevin's avatar Florent Poittevin
Browse files

Add asterisk on mandatory field

parent 406a0bc0
No related branches found
No related tags found
1 merge request!10Fpo/crud deposit
<form [formGroup]="form" (ngSubmit)="onSubmit()"> <form [formGroup]="form" (ngSubmit)="onSubmit()">
<mat-form-field appearance="outline"> <mat-form-field>
<mat-label>{{'deposit.title' | translate }}</mat-label> <mat-label>{{'deposit.title' | translate }}</mat-label>
<input [formControlName]="title" matInput placeholder="{{'deposit.title.placeholder' | translate }}"> <input [formControlName]="title"
<mat-hint>{{'deposit.hint.title' | translate }}</mat-hint> matInput
placeholder="{{'deposit.title.placeholder' | translate }}"
[required]="isRequired(title)"
>
<mat-error *ngIf="getFormControle(description).invalid">{{'required' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input [formControlName]="description" matInput placeholder="{{'deposit.description' | translate }}" required> <input #fieldDescription
[formControlName]="description"
matInput
placeholder="{{'deposit.description' | translate }}"
[required]="isRequired(description)"
>
<mat-error *ngIf="getFormControle(description).invalid">{{'required' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
...@@ -40,6 +50,7 @@ ...@@ -40,6 +50,7 @@
<mat-form-field> <mat-form-field>
<input [formControlName]="author" matInput placeholder="{{'deposit.author' | translate }}"> <input [formControlName]="author" matInput placeholder="{{'deposit.author' | translate }}">
<mat-hint>{{'deposit.hint.author' | translate }}</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
...@@ -59,7 +70,7 @@ ...@@ -59,7 +70,7 @@
<mat-checkbox [formControlName]="hasEmbargo">{{'deposit.hasEmbargo' | translate }}</mat-checkbox> <mat-checkbox [formControlName]="hasEmbargo">{{'deposit.hasEmbargo' | translate }}</mat-checkbox>
<mat-form-field appearance="outline"> <mat-form-field>
<mat-label>{{'deposit.license' | translate }}</mat-label> <mat-label>{{'deposit.license' | translate }}</mat-label>
<mat-select [formControlName]="licenseId"> <mat-select [formControlName]="licenseId">
<mat-option *ngFor="let license of licenses" [value]="license.resId"> <mat-option *ngFor="let license of licenses" [value]="license.resId">
...@@ -68,7 +79,7 @@ ...@@ -68,7 +79,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field>
<mat-label>{{'deposit.submissionPolicy' | translate }}</mat-label> <mat-label>{{'deposit.submissionPolicy' | translate }}</mat-label>
<mat-select [formControlName]="submissionPolicyId"> <mat-select [formControlName]="submissionPolicyId">
<!-- <mat-option *ngFor="let language of languages" [value]="language.resId">--> <!-- <mat-option *ngFor="let language of languages" [value]="language.resId">-->
...@@ -77,7 +88,7 @@ ...@@ -77,7 +88,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field>
<mat-label>{{'deposit.preservationPolicy' | translate }}</mat-label> <mat-label>{{'deposit.preservationPolicy' | translate }}</mat-label>
<mat-select [formControlName]="preservationPolicyId"> <mat-select [formControlName]="preservationPolicyId">
<!-- <mat-option *ngFor="let language of languages" [value]="language.resId">--> <!-- <mat-option *ngFor="let language of languages" [value]="language.resId">-->
......
import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {FormBuilder, FormGroup} from "@angular/forms"; import {AbstractControl, FormBuilder, FormGroup, Validators} from "@angular/forms";
import {DepositsModel} from "@app/generated-api";
import {BaseDirective} from "@app/shared/directives/base.directive"; import {BaseDirective} from "@app/shared/directives/base.directive";
@Component({ @Component({
...@@ -21,6 +20,8 @@ export abstract class AbstractFormComponent<T> extends BaseDirective implements ...@@ -21,6 +20,8 @@ export abstract class AbstractFormComponent<T> extends BaseDirective implements
@Output() @Output()
submitEvent: EventEmitter<T>; submitEvent: EventEmitter<T>;
required = Validators.required;
protected constructor(protected fb: FormBuilder) { protected constructor(protected fb: FormBuilder) {
super(); super();
this.submitEvent = new EventEmitter<T>(); this.submitEvent = new EventEmitter<T>();
...@@ -48,4 +49,16 @@ export abstract class AbstractFormComponent<T> extends BaseDirective implements ...@@ -48,4 +49,16 @@ export abstract class AbstractFormComponent<T> extends BaseDirective implements
protected onSubmit() { protected onSubmit() {
this.submitEvent.emit(this.form.value as T); this.submitEvent.emit(this.form.value as T);
} }
getFormControle(key: string): AbstractControl {
return this.form.get(key);
}
isRequired(key: string): boolean {
const errors = this.getFormControle(key).errors;
if (errors == null) {
return false;
}
return errors.required === true ? true : false;
}
} }
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"loginMessage": "You are currently not connected, please login to continue." "loginMessage": "You are currently not connected, please login to continue."
}, },
"toolbar": { "toolbar": {
"login": "Login", "login": "Login",
"logout": "Logout" "logout": "Logout"
} }
}, },
...@@ -34,7 +34,17 @@ ...@@ -34,7 +34,17 @@
"author": "Author", "author": "Author",
"collectionBegin": "Collection Begin", "collectionBegin": "Collection Begin",
"collectionEnd": "Collection End", "collectionEnd": "Collection End",
"delete": "",
"description": "Description", "description": "Description",
"dialog": {
"delete": {
"cancel": "Cancel",
"confirm": "Yes! I'm sure",
"message": "Are you sure you want to delete the Deposit '{{title}}'?",
"title": "Confirm deletion"
}
},
"edit": "Edit",
"hasEmbargo": "Has Embargo", "hasEmbargo": "Has Embargo",
"hint": { "hint": {
"title": "Title of the deposit" "title": "Title of the deposit"
...@@ -60,16 +70,7 @@ ...@@ -60,16 +70,7 @@
"title": "Title" "title": "Title"
} }
}, },
"title": "Title", "title": "Title"
"edit": "Edit",
"dialog": {
"delete": {
"cancel": "Cancel",
"confirm": "Yes! I'm sure",
"message": "Are you sure you want to delete the Deposit '{{title}}'?",
"title": "Confirm deletion"
}
}
}, },
"organizationalUnit": { "organizationalUnit": {
"closingDate": "Closing Date", "closingDate": "Closing Date",
...@@ -104,8 +105,9 @@ ...@@ -104,8 +105,9 @@
} }
} }
}, },
"required": "",
"search": "Search", "search": "Search",
"table": { "table": {
"nodata": "There is no data to display" "nodata": "There is no data to display"
} }
} }
\ No newline at end of file
{ {
"app": { "app": {
"login": { "login": {
"loginButton": "Log in", "loginButton": "Log in",
"loginMessage": "You are currently not connected, please login to continue." "loginMessage": "You are currently not connected, please login to continue."
}, },
"toolbar": { "toolbar": {
"login": "Login", "login": "Login",
"logout": "Logout" "logout": "Logout"
} }
}, },
"breadcrumb": { "breadcrumb": {
"access": { "access": {
"root": "Access", "root": "Access",
"search": "Search" "search": "Search"
}, },
"deposit": { "deposit": {
"create": "Create", "create": "Create",
"detail": "Detail", "detail": "Detail",
"list": "List", "list": "List",
"root": "Deposit" "root": "Deposit"
}, },
"home": "Home", "home": "Home",
"organizationalUnit": { "organizationalUnit": {
"create": "Create", "create": "Create",
"detail": "Detail", "detail": "Detail",
"edit": "Edit", "edit": "Edit",
"list": "List", "list": "List",
"root": "Organizational Unit" "root": "Organizational Unit"
} }
}, },
"deposit": { "deposit": {
"accessLevel": "Access Level", "accessLevel": "Access Level",
"author": "Author", "author": "Author",
"collectionBegin": "Collection Begin", "collectionBegin": "Collection Begin",
"collectionEnd": "Collection End", "collectionEnd": "Collection End",
"description": "Description",
"hasEmbargo": "Has Embargo",
"hint": {
"title": "Title of the deposit"
},
"language": "Language",
"license": "License",
"new": "Create deposit",
"preservationPolicy": "Preservation Policy",
"publicationDate": "Publication Date",
"refresh": "Refresh",
"submissionPolicy": "Submission Policy",
"submit": "Submit",
"table": {
"header": {
"creation": {
"when": "Created date"
},
"lastUpdate": {
"when": "Last update"
},
"publicationDate": "Publication date",
"status": "Status",
"title": "Title"
}
},
"title": "Title",
"edit": "Edit",
"delete": "Delete", "delete": "Delete",
"description": "Description",
"dialog": { "dialog": {
"delete": { "delete": {
"cancel": "Cancel", "cancel": "Cancel",
...@@ -70,43 +43,71 @@ ...@@ -70,43 +43,71 @@
"message": "Are you sure you want to delete the Deposit '{{title}}'?", "message": "Are you sure you want to delete the Deposit '{{title}}'?",
"title": "Confirm deletion" "title": "Confirm deletion"
} }
},
"edit": "Edit",
"hasEmbargo": "Has Embargo",
"hint": {
"title": "Title of the deposit"
},
"language": "Language",
"license": "License",
"new": "Create deposit",
"preservationPolicy": "Preservation Policy",
"publicationDate": "Publication Date",
"refresh": "Refresh",
"submissionPolicy": "Submission Policy",
"submit": "Submit",
"table": {
"header": {
"creation": {
"when": "Created date"
},
"lastUpdate": {
"when": "Last update"
},
"publicationDate": "Publication date",
"status": "Status",
"title": "Title"
}
},
"title": "Title"
},
"organizationalUnit": {
"closingDate": "Closing Date",
"delete": "Delete",
"description": "Description",
"dialog": {
"delete": {
"cancel": "Cancel",
"confirm": "Yes! I'm sure",
"message": "Are you sure you want to delete the organizational units '{{name}}'?",
"title": "Confirm deletion"
}
},
"edit": "Edit",
"hint": {
"name": "The name of the organization"
},
"isEmpty": "Is Empty",
"name": "Name",
"new": "Create new organizational unit",
"open": "Open",
"openingDate": "Opening Date",
"refresh": "Refresh",
"submit": "Submit",
"table": {
"header": {
"creation": {
"when": "Created the"
},
"description": "Description",
"name": "Name"
}
} }
}, },
"organizationalUnit": { "required": "This field is required",
"closingDate": "Closing Date", "search": "Search",
"delete": "Delete", "table": {
"description": "Description", "nodata": "There is no data to display"
"dialog": { }
"delete": {
"cancel": "Cancel",
"confirm": "Yes! I'm sure",
"message": "Are you sure you want to delete the organizational units '{{name}}'?",
"title": "Confirm deletion"
}
},
"edit": "Edit",
"hint": {
"name": "The name of the organization"
},
"isEmpty": "Is Empty",
"name": "Name",
"new": "Create new organizational unit",
"open": "Open",
"openingDate": "Opening Date",
"refresh": "Refresh",
"submit": "Submit",
"table": {
"header": {
"creation": {
"when": "Created the"
},
"description": "Description",
"name": "Name"
}
}
},
"search": "Search",
"table": {
"nodata": "There is no data to display"
}
} }
{ {
"app": { "app": {
"login": { "login": {
"loginButton": "Se connecter", "loginButton": "Se connecter",
"loginMessage": "Vous n'êtes actuellement pas connecté, veuillez vous connecter pour continuer." "loginMessage": "Vous n'êtes actuellement pas connecté, veuillez vous connecter pour continuer."
}, },
"toolbar": { "toolbar": {
"login": "Login", "login": "Login",
"logout": "Déconnexion" "logout": "Déconnexion"
} }
}, },
"breadcrumb": { "breadcrumb": {
"access": { "access": {
"root": "Accès", "root": "Accès",
"search": "Recherche" "search": "Recherche"
}, },
"deposit": { "deposit": {
"create": "Création", "create": "Création",
"detail": "Détail", "detail": "Détail",
"list": "Liste", "list": "Liste",
"root": "Dépôts" "root": "Dépôts"
}, },
"home": "Accueil", "home": "Accueil",
"organizationalUnit": { "organizationalUnit": {
"create": "Création", "create": "Création",
"detail": "Détail", "detail": "Détail",
"edit": "Edition", "edit": "Edition",
"list": "Liste", "list": "Liste",
"root": "Unité organisationnel" "root": "Unité organisationnel"
} }
}, },
"deposit": { "deposit": {
"accessLevel": "Access Level", "accessLevel": "Access Level",
"author": "Author", "author": "Author",
"collectionBegin": "Collection Begin", "collectionBegin": "Collection Begin",
"collectionEnd": "Collection End", "collectionEnd": "Collection End",
"description": "Description", "delete": "",
"hasEmbargo": "Has Embargo", "description": "Description",
"hint": { "dialog": {
"title": "Title of the deposit" "delete": {
}, "cancel": "",
"language": "Language", "confirm": "",
"license": "License", "message": "",
"new": "Create deposit", "title": ""
"preservationPolicy": "Preservation Policy", }
"publicationDate": "Date de publication", },
"refresh": "Refresh", "edit": "",
"submissionPolicy": "Submission Policy", "hasEmbargo": "Has Embargo",
"submit": "Submit", "hint": {
"table": { "title": "Title of the deposit"
"header": { },
"creation": { "language": "Language",
"when": "Date de création" "license": "License",
}, "new": "Create deposit",
"lastUpdate": { "preservationPolicy": "Preservation Policy",
"when": "Dernière mise à jour" "publicationDate": "Date de publication",
}, "refresh": "Refresh",
"publicationDate": "Date de publication", "submissionPolicy": "Submission Policy",
"status": "Statut", "submit": "Submit",
"title": "Titre" "table": {
} "header": {
}, "creation": {
"title": "Title" "when": "Date de création"
}, },
"organizationalUnit": { "lastUpdate": {
"closingDate": "", "when": "Dernière mise à jour"
"delete": "", },
"description": "", "publicationDate": "Date de publication",
"dialog": { "status": "Statut",
"delete": { "title": "Titre"
"cancel": "", }
"confirm": "", },
"message": "", "title": "Title"
"title": "" },
} "organizationalUnit": {
}, "closingDate": "",
"edit": "", "delete": "",
"hint": { "description": "",
"name": "" "dialog": {
}, "delete": {
"isEmpty": "", "cancel": "",
"name": "", "confirm": "",
"new": "Créer nouvelle unité organisationnel", "message": "",
"open": "", "title": ""
"openingDate": "", }
"refresh": "Refresh", },
"submit": "", "edit": "",
"table": { "hint": {
"header": { "name": ""
"creation": { },
"when": "Créé le" "isEmpty": "",
}, "name": "",
"description": "Déscription", "new": "Créer nouvelle unité organisationnel",
"name": "Nom" "open": "",
} "openingDate": "",
} "refresh": "Refresh",
}, "submit": "",
"search": "Search", "table": {
"table": { "header": {
"nodata": "There is no data to display" "creation": {
} "when": "Créé le"
},
"description": "Déscription",
"name": "Nom"
}
}
},
"required": "Ce champ est requis",
"search": "Search",
"table": {
"nodata": "There is no data to display"
}
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment