Added visibility specified for element

This commit is contained in:
Vito Albano
2016-10-25 18:05:10 +01:00
parent e0ddbb6bd8
commit 7f4415428d
3 changed files with 22 additions and 17 deletions

View File

@@ -1,17 +1,15 @@
<div class="mdl-grid" *ngIf="field?.isVisible">
<div class="mdl-grid" *ngIf="field?.isVisible" id="data-widget">
<div class="mdl-cell mdl-cell--11-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
[class.date-widget__invalid]="!field.isValid">
<input id="dateInput"
class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[attr.required]="isRequired()"
[(ngModel)]="field.value"
[value]="field.value"
(ngModelChange)="onDateChanged()"
(onOk)="onDateSelected()"
[disabled]="field.readOnly">
[class.date-widget__invalid]="!field.isValid">
<input class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[attr.required]="isRequired()"
[(ngModel)]="field.value"
(ngModelChange)="onDateChanged()"
(onOk)="onDateSelected()"
[disabled]="field.readOnly">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
</div>
@@ -24,3 +22,4 @@
</button>
</div>
</div>

View File

@@ -83,7 +83,9 @@ describe('DateWidget', () => {
it('should setup trigger element', () => {
let el = {};
spyOn(nativeElement, 'querySelector').and.returnValue(el);
widget.field = new FormFieldModel(null, {id: 'fake-id'});
widget.ngOnInit();
widget.ngAfterViewChecked();
expect(widget.datePicker.trigger).toBe(el);
});
@@ -231,7 +233,7 @@ describe('DateWidget', () => {
fixture.whenStable()
.then(() => {
fixture.detectChanges();
expect(element.querySelector('#date-field-id')).toBeNull();
expect(element.querySelector('#data-widget')).toBeNull();
});
}));
@@ -258,7 +260,7 @@ describe('DateWidget', () => {
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(element.querySelector('#date-field-id')).toBeNull();
expect(element.querySelector('#data-widget')).toBeNull();
});
});
dateWidget.checkVisibility(dateWidget.field);

View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, ElementRef, OnInit } from '@angular/core';
import { Component, ElementRef, OnInit, AfterViewChecked } from '@angular/core';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
@@ -24,7 +24,7 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
templateUrl: './date.widget.html',
styleUrls: ['./date.widget.css']
})
export class DateWidget extends TextFieldWidgetComponent implements OnInit {
export class DateWidget extends TextFieldWidgetComponent implements OnInit, AfterViewChecked {
DATE_FORMAT: string = 'D-M-YYYY';
@@ -57,8 +57,12 @@ export class DateWidget extends TextFieldWidgetComponent implements OnInit {
}
this.datePicker = new mdDateTimePicker.default(settings);
}
ngAfterViewChecked() {
if (this.elementRef) {
this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput');
let dataLocator = '#' + this.field.id;
this.datePicker.trigger = this.elementRef.nativeElement.querySelector(dataLocator);
}
}