mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[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:
@@ -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>
|
||||||
|
@@ -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(() => {
|
||||||
|
Reference in New Issue
Block a user