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

View File

@ -404,4 +404,15 @@ describe('StartTaskComponent', () => {
fixture.detectChanges();
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() {
this.taskForm = this.formBuilder.group({
name: new FormControl(this.taskDetailsModel.name, [Validators.required, Validators.maxLength(this.maxTaskNameLength)]),
description: new FormControl(''),
name: new FormControl(this.taskDetailsModel.name, [Validators.required, Validators.maxLength(this.maxTaskNameLength), this.whitespaceValidator]),
description: new FormControl('', [this.whitespaceValidator]),
formKey: new FormControl('')
});
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) {
this.taskDetailsModel.name = form.name;
this.taskDetailsModel.description = form.description;