Les champs requis sont indiqués dans les formulaires.

Implémente #11

src/app/modules/colors/pages/add/add.component.ts

@@ -20,7 +20,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Nom',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Un nom est requis'}
       ]
@@ -30,7 +30,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Description',
       icon: 'text',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une description est requise'}
       ]
@@ -41,7 +41,7 @@ export class AddComponent extends ErrorHandlingComponent {
       icon: 'palette',
       type: 'color',
       defaultValue: "#ffffff",
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une couleur est requise'}
       ]
@@ -53,7 +53,7 @@ export class AddComponent extends ErrorHandlingComponent {
       min: 0,
       max: 100,
       defaultValue: 10,
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Le lustre de la couleur est requis'}
       ]
@@ -86,7 +86,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Bannière',
       icon: 'domain',
       type: 'select',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une bannière est requise'}
       ],

src/app/modules/colors/pages/edit/edit.component.ts

@@ -30,7 +30,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Nom',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Un nom est requis'}
       ]
@@ -40,7 +40,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Description',
       icon: 'text',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une description est requise'}
       ]
@@ -50,7 +50,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Couleur',
       icon: 'palette',
       type: 'color',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une couleur est requise'}
       ]

src/app/modules/company/pages/add/add.component.ts

@@ -1,6 +1,5 @@
 import {Component} from '@angular/core'
 import {CompanyService} from '../../service/company.service'
-import {Validators} from '@angular/forms'
 import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component'
 import {FormField} from '../../../shared/components/entity-add/entity-add.component'
 import {ActivatedRoute, Router} from '@angular/router'
@@ -18,7 +17,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Nom',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Un nom est requis'}
       ]

src/app/modules/company/pages/edit/edit.component.ts

@@ -20,7 +20,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Nom',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Un nom est requis'}
       ]

src/app/modules/material-type/pages/add/add.component.ts

@@ -18,7 +18,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Nom',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: (errors) => errors.required, message: 'Un nom est requis'},
       ]
@@ -28,7 +28,8 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Préfixe',
       icon: 'label-variant',
       type: 'text',
-      validator: Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(3)]),
+      required: true,
+      validator: Validators.compose([Validators.minLength(3), Validators.maxLength(3)]),
       errorMessages: [
         {conditionFn: (errors) => errors.required, message: 'Un préfixe est requis'},
         {

src/app/modules/material-type/pages/edit/edit.component.ts

@@ -20,7 +20,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Nom',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: (errors) => errors.required, message: 'Un nom est requis'},
       ]
@@ -30,7 +30,8 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Préfixe',
       icon: 'label-variant',
       type: 'text',
-      validator: Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(3)]),
+      required: true,
+      validator: Validators.compose([Validators.minLength(3), Validators.maxLength(3)]),
       errorMessages: [
         {conditionFn: (errors) => errors.required, message: 'Un préfixe est requis'},
         {

src/app/modules/material/pages/add/add.component.ts

@@ -20,7 +20,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Code',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: (errors) => errors.required, message: 'Un code est requis'}
       ]
@@ -30,7 +30,8 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Quantité en inventaire',
       icon: 'beaker-outline',
       type: 'number',
-      validator: Validators.compose([Validators.required, Validators.min(0)]),
+      required: true,
+      validator: Validators.min(0),
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une quantité en inventaire est requise'},
         {conditionFn: errors => errors.min, message: 'La quantité doit être supérieure ou égale à 0'}
@@ -42,7 +43,7 @@ export class AddComponent extends ErrorHandlingComponent {
       label: 'Type de produit',
       icon: 'shape-outline',
       type: 'select',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Un type de produit est requis'}
       ],

src/app/modules/material/pages/edit/edit.component.ts

@@ -25,7 +25,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Code',
       icon: 'form-textbox',
       type: 'text',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: (errors) => errors.required, message: 'Un code est requis'}
       ]
@@ -35,7 +35,8 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Quantité en inventaire',
       icon: 'beaker-outline',
       type: 'number',
-      validator: Validators.compose([Validators.required, Validators.min(0)]),
+      required: true,
+      validator: Validators.min(0),
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Une quantité en inventaire est requise'},
         {conditionFn: errors => errors.min, message: 'La quantité doit être supérieure ou égale à 0'}
@@ -47,7 +48,7 @@ export class EditComponent extends ErrorHandlingComponent {
       label: 'Type de produit',
       icon: 'shape-outline',
       type: 'select',
-      validator: Validators.required,
+      required: true,
       errorMessages: [
         {conditionFn: errors => errors.required, message: 'Un type de produit est requis'}
       ],

src/app/modules/shared/components/entity-add/entity-add.component.html

@@ -44,7 +44,12 @@
   let-control="control" let-field="field">
   <mat-form-field>
     <mat-label>{{field.label}}</mat-label>
-    <input matInput [type]="field.type" [formControl]="control" [step]="field.step ? field.step : null"/>
+    <input
+      matInput
+      [type]="field.type"
+      [formControl]="control"
+      [step]="field.step ? field.step : null"
+      [required]="field.required"/>
     <mat-icon [svgIcon]="field.icon" matSuffix></mat-icon>
     <mat-error *ngIf="control.invalid && field.errorMessages">
       <ng-container *ngFor="let errorMessage of field.errorMessages">
@@ -57,7 +62,7 @@
 <ng-template
   #checkboxTemplate
   let-control="control" let-field="field">
-  <mat-checkbox [formControl]="control">
+  <mat-checkbox [formControl]="control" [required]="field.required">
     {{field.label}}
   </mat-checkbox>
 </ng-template>
@@ -67,7 +72,7 @@
   let-control="control" let-field="field">
   <mat-form-field *ngIf="field.options$ | async as options">
     <mat-label>{{field.label}}</mat-label>
-    <mat-select [formControl]="control">
+    <mat-select [formControl]="control" [required]="field.required">
       <mat-option *ngFor="let option of options" [value]="option.value">
         {{option.label}}
       </mat-option>
@@ -81,7 +86,11 @@
   let-control="control" let-field="field">
   <mat-form-field>
     <mat-label>{{field.label}}</mat-label>
-    <ngx-mat-file-input [accept]="field.fileType" [formControl]="control"></ngx-mat-file-input>
+    <ngx-mat-file-input
+      [accept]="field.fileType"
+      [formControl]="control"
+      [required]="field.required">
+    </ngx-mat-file-input>
   </mat-form-field>
 </ng-template>
 

src/app/modules/shared/components/entity-add/entity-add.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core'
-import {FormBuilder, FormControl, FormGroup, ValidatorFn} from '@angular/forms'
+import {FormBuilder, FormControl, FormGroup, ValidatorFn, Validators} from '@angular/forms'
 import {Observable} from 'rxjs'
 
 @Component({
@@ -23,7 +23,8 @@ export class EntityAddComponent {
   ngOnInit() {
     const formGroup = {}
     this.formFields.forEach(f => {
-      formGroup[f.name] = new FormControl(f.defaultValue, f.validator)
+      const validator = f.required ? Validators.compose([Validators.required, f.validator]) : f.validator
+      formGroup[f.name] = new FormControl(f.defaultValue, validator)
     })
     this.form = this.formBuilder.group(formGroup)
   }
@@ -47,6 +48,7 @@ export class FormField {
     public label?: string,
     public icon?: string,
     public type?: string,
+    public required?: boolean,
     public validator?: ValidatorFn,
     public errorMessages?: FormErrorMessage[],
     public valueFn?: (any) => any,

src/app/modules/shared/components/entity-edit/entity-edit.component.html

@@ -46,7 +46,12 @@
   let-control="control" let-field="field">
   <mat-form-field>
     <mat-label>{{field.label}}</mat-label>
-    <input matInput [type]="field.type" [formControl]="control" [readonly]="field.readonly"/>
+    <input
+      matInput
+      [type]="field.type"
+      [formControl]="control"
+      [readonly]="field.readonly"
+      [required]="field.required"/>
     <mat-icon [svgIcon]="field.icon" matSuffix></mat-icon>
     <mat-error *ngIf="control.invalid && field.errorMessages">
       <ng-container *ngFor="let errorMessage of field.errorMessages">
@@ -61,7 +66,7 @@
   let-control="control" let-field="field">
   <mat-form-field *ngIf="field.options$ | async as options">
     <mat-label>{{field.label}}</mat-label>
-    <mat-select [formControl]="control">
+    <mat-select [formControl]="control" [required]="field.required">
       <mat-option *ngFor="let option of options" [value]="option.value">
         {{option.label}}
       </mat-option>
@@ -75,7 +80,11 @@
   let-control="control" let-field="field">
   <mat-form-field>
     <mat-label>{{field.label}}</mat-label>
-    <ngx-mat-file-input [accept]="field.fileType" [formControl]="control"></ngx-mat-file-input>
+    <ngx-mat-file-input
+      [accept]="field.fileType"
+      [formControl]="control"
+      [required]="field.required">
+    </ngx-mat-file-input>
   </mat-form-field>
 </ng-template>