inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2486] input mask placeholder should be shown whenever it is present (#3090)

Browse Source 
* [ADF-2486] input mask placeholder should be shown whenever it is present

* [ADF-2486] fixed test for checking placehoolder
This commit is contained in:
Vito
2018-03-19 14:37:54 +00:00
committed by Eugenio Romano
parent 9d578bbd55
commit 1c2a959a23
3 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/form/components/widgets/text/text.widget.html
View File

@@ -12,7 +12,7 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly || readOnly"
[textMask]="{mask: mask, isReversed: isMaskReversed}"
placeholder="{{field.placeholder}}">
[placeholder]="placeholder">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

33
lib/core/form/components/widgets/text/text.widget.spec.ts
View File

@@ -131,7 +131,8 @@ describe('TextWidgetComponent', () => {
value: '',
params: {inputMask: '##-##0,00%'},
type: FormFieldTypes.TEXT,
readOnly: false
readOnly: false,
placeholder: 'simple palceholder'
});
fixture.detectChanges();
@@ -143,6 +144,12 @@ describe('TextWidgetComponent', () => {
expect(element.querySelector('#text-id')).not.toBeNull();
});
it('should show the field placeholder', () => {
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.placeholder).toBe('simple palceholder');
});
it('should prevent text to be written if is not allowed by the mask on keyUp event', async(() => {
expect(element.querySelector('#text-id')).not.toBeNull();
@@ -247,5 +254,29 @@ describe('TextWidgetComponent', () => {
});
}));
});
describe('and a mask placeholder is configured', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({taskId: 'fake-task-id'}), {
id: 'text-id',
name: 'text-name',
value: '',
params: {inputMask: '##-##0,00%', inputMaskPlaceholder: 'Phone : (__) ___-___'},
type: FormFieldTypes.TEXT,
readOnly: false,
placeholder: 'simple palceholder'
});
fixture.detectChanges();
});
it('should show the input mask placeholder', () => {
const inputElement: HTMLInputElement = <HTMLInputElement> element.querySelector('#text-id');
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.placeholder).toBe('Phone : (__) ___-___');
});
});
});
});

2
lib/core/form/components/widgets/text/text.widget.ts
View File

@@ -31,6 +31,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
export class TextWidgetComponent extends WidgetComponent implements OnInit {
mask: string;
placeholder: string;
isMaskReversed: boolean;
constructor(public formService: FormService) {
@@ -40,6 +41,7 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit {
ngOnInit() {
if (this.field.params && this.field.params['inputMask']) {
this.mask = this.field.params['inputMask'];
this.placeholder = this.field.params['inputMaskPlaceholder'] ? this.field.params['inputMaskPlaceholder'] : this.field.placeholder;
this.isMaskReversed = this.field.params['inputMaskReversed'] ? this.field.params['inputMaskReversed'] : false;
}
}