[ADF-4068] StartTaskComponent - fix name and description empty space … (#4351)

* [ADF-4068] StartTaskComponent - fix name and description empty space validation

* [ADF-4068] StartTakComponent - add unit test
This commit is contained in:
Silviu Popa 2019-02-25 21:53:20 +02:00 committed by Eugenio Romano
parent 71dca95749
commit 0aaa6bea16
4 changed files with 34 additions and 11 deletions

View File

@ -134,7 +134,8 @@
"ERROR": { "ERROR": {
"REQUIRED": "Field required", "REQUIRED": "Field required",
"DATE": "Date format DD/MM/YYYY", "DATE": "Date format DD/MM/YYYY",
"MAXIMUM_LENGTH": "Length exceeded, {{characters}} characters max." "MAXIMUM_LENGTH": "Length exceeded, {{characters}} characters max.",
"MESSAGE": "Enter a different value"
} }
} }
}, },

View File

@ -7,11 +7,11 @@
<div class="adf-task-name"> <div class="adf-task-name">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate}}</mat-label> <mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate}}</mat-label>
<input <input
matInput matInput
id="name_id" id="name_id"
formControlName="name"> formControlName="name">
<mat-error *ngIf="nameController.hasError('required')"> <mat-error *ngIf="nameController.hasError('required') || nameController.hasError('whitespace')">
{{ 'ADF_TASK_LIST.START_TASK.FORM.ERROR.REQUIRED' | translate }} {{ 'ADF_TASK_LIST.START_TASK.FORM.ERROR.REQUIRED' | translate }}
</mat-error> </mat-error>
<mat-error *ngIf="nameController.hasError('maxlength')"> <mat-error *ngIf="nameController.hasError('maxlength')">
@ -28,21 +28,24 @@
id="description_id" id="description_id"
formControlName="description"> formControlName="description">
</textarea> </textarea>
<mat-error *ngIf="descriptionController.hasError('whitespace')">
{{ 'ADF_TASK_LIST.START_TASK.FORM.ERROR.MESSAGE' | translate }}
</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px"> <div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<input <input
matInput matInput
(keyup)="onDateChanged($event.srcElement.value)" (keyup)="onDateChanged($event.srcElement.value)"
(dateInput)="onDateChanged($event.value)" (dateInput)="onDateChanged($event.value)"
[matDatepicker]="taskDatePicker" [matDatepicker]="taskDatePicker"
placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}" placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
id="date_id"> id="date_id">
<mat-datepicker-toggle <mat-datepicker-toggle
matSuffix matSuffix
[for]="taskDatePicker"></mat-datepicker-toggle> [for]="taskDatePicker"></mat-datepicker-toggle>
<mat-datepicker <mat-datepicker
#taskDatePicker #taskDatePicker
[touchUi]="true"> [touchUi]="true">
</mat-datepicker> </mat-datepicker>
@ -54,9 +57,9 @@
</div> </div>
</mat-form-field> </mat-form-field>
<div fxFlex> <div fxFlex>
<people-widget <people-widget
(peopleSelected)="getAssigneeId($event)" (peopleSelected)="getAssigneeId($event)"
[field]="field" [field]="field"
class="adf-people-widget-content"></people-widget> class="adf-people-widget-content"></people-widget>
</div> </div>
</div> </div>

View File

@ -404,4 +404,15 @@ describe('StartTaskComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(logSpy).toHaveBeenCalled(); expect(logSpy).toHaveBeenCalled();
}); });
it('should emit error when description have only white spaces', () => {
fixture.detectChanges();
let description = component.taskForm.controls['description'];
description.setValue(' ');
fixture.detectChanges();
expect(description.valid).toBeFalsy();
description.setValue('');
fixture.detectChanges();
expect(description.valid).toBeTruthy();
});
}); });

View File

@ -102,14 +102,22 @@ export class StartTaskComponent implements OnInit {
buildForm() { buildForm() {
this.taskForm = this.formBuilder.group({ this.taskForm = this.formBuilder.group({
name: new FormControl(this.taskDetailsModel.name, [Validators.required, Validators.maxLength(this.maxTaskNameLength)]), name: new FormControl(this.taskDetailsModel.name, [Validators.required, Validators.maxLength(this.maxTaskNameLength), this.whitespaceValidator]),
description: new FormControl(''), description: new FormControl('', [this.whitespaceValidator]),
formKey: new FormControl('') formKey: new FormControl('')
}); });
this.taskForm.valueChanges.subscribe((taskFormValues) => this.setTaskDetails(taskFormValues)); this.taskForm.valueChanges.subscribe((taskFormValues) => this.setTaskDetails(taskFormValues));
} }
public whitespaceValidator(control: FormControl) {
if (control.value) {
const isWhitespace = (control.value || '').trim().length === 0;
const isValid = control.value.length === 0 || !isWhitespace;
return isValid ? null : { 'whitespace': true };
}
}
setTaskDetails(form) { setTaskDetails(form) {
this.taskDetailsModel.name = form.name; this.taskDetailsModel.name = form.name;
this.taskDetailsModel.description = form.description; this.taskDetailsModel.description = form.description;