[AAE-174] Show radio box in text box when read only (#5182)

* show radio box in text box when read only

* show radio box in text box when read only
This commit is contained in:
Eugenio Romano
2019-10-23 12:23:11 +01:00
committed by GitHub
parent 200e652f0d
commit e667ec4f2f
2 changed files with 33 additions and 6 deletions

View File

@@ -2,12 +2,11 @@
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id"> [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id">
<div class="adf-radio-button-container"> <div class="adf-radio-button-container">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label> <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value"> <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" *ngIf="!field.readOnly">
<mat-radio-button <mat-radio-button
[id]="field.id + '-' + opt.id" [id]="field.id + '-' + opt.id"
[name]="field.id" [name]="field.id"
[value]="opt.id" [value]="opt.id"
[disabled]="field.readOnly"
[checked]="field.value === opt.id" [checked]="field.value === opt.id"
(change)="onOptionClick(opt.id)" (change)="onOptionClick(opt.id)"
color="primary" color="primary"
@@ -15,6 +14,7 @@
{{opt.name}} {{opt.name}}
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
<display-text-widget *ngIf="field.readOnly" [field]="field"></display-text-widget>
</div> </div>
<error-widget [error]="field.validationSummary" ></error-widget> <error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

View File

@@ -134,10 +134,15 @@ describe('RadioButtonsWidgetComponent', () => {
let fixture: ComponentFixture<RadioButtonsWidgetComponent>; let fixture: ComponentFixture<RadioButtonsWidgetComponent>;
let element: HTMLElement; let element: HTMLElement;
let stubFormService: FormService; let stubFormService: FormService;
const restOption: FormFieldOption[] = [{ id: 'opt-1', name: 'opt-name-1' }, { const restOption: FormFieldOption[] = [
id: 'opt-2', {
name: 'opt-name-2' id: 'opt-1',
}]; name: 'opt-name-1'
},
{
id: 'opt-2',
name: 'opt-name-2'
}];
beforeEach(async(() => { beforeEach(async(() => {
fixture = TestBed.createComponent(RadioButtonsWidgetComponent); fixture = TestBed.createComponent(RadioButtonsWidgetComponent);
@@ -149,6 +154,28 @@ describe('RadioButtonsWidgetComponent', () => {
fixture.destroy(); fixture.destroy();
}); });
describe('and radioButton is readonly', () => {
beforeEach(async(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
id: 'radio-id',
name: 'radio-name',
type: FormFieldTypes.RADIO_BUTTONS,
readOnly: true
});
radioButtonWidget.field.isVisible = true;
const fakeContainer = new ContainerModel(radioButtonWidget.field);
radioButtonWidget.field.form.fields.push(fakeContainer);
fixture.detectChanges();
}));
it('should show radio buttons as text when is readonly', async(() => {
expect(element.querySelector('display-text-widget')).toBeDefined();
}));
});
describe('and radioButton is populated via taskId', () => { describe('and radioButton is populated via taskId', () => {
beforeEach(async(() => { beforeEach(async(() => {