Skip to content

Commit

Permalink
feat: formly - add the legend element to the fieldset, add legend cla…
Browse files Browse the repository at this point in the history 
…ss attribute (#1354)
  • Loading branch information
@andreassteinmann
andreassteinmann authored Jan 23, 2023
1 parent 84b0e99 commit 256bd7f
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 15 deletions.
28 changes: 14 additions & 14 deletions docs/guides/formly.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,20 +254,20 @@ Refer to the tables below for an overview of these parts.

Template option `inputClass`: These css class(es) will be added to all input/select/textarea/text tags.

| Name | Description | Relevant templateOptions |
| -------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| ish-text-input-field | Basic input field, supports all text types | type: 'text' (default),'email','tel','password' |
| ish-select-field | Basic select field | `options`: `{ value: any; label: string}[]` or Observable. `placeholder`: Translation key or string for the default selection |
| ish-textarea-field | Basic textarea field | `cols`& `rows`: Specifies the dimensions of the textarea |
| ish-checkbox-field | Basic checkbox input | ---- |
| ish-email-field | Email input field that automatically adds an e-mail validator and error messages | ---- |
| ish-password-field | Password input field that automatically adds a password validator and error messages | ---- |
| ish-phone-field | Phone number input field that automatically adds a phone number validator and error messages | ---- |
| ish-fieldset-field | Wraps fields in a `<fieldset>` tag for styling | `fieldsetClass`: Class that will be added to the fieldset tag. `childClass`: Class that will be added to the child div. |
| ish-captcha-field | Includes the `<ish-lazy-captcha>` component and adds the relevant `formControls` to the form | `topic`: Topic that will be passed to the Captcha component. |
| ish-radio-field | Basic radio input | ---- |
| ish-plain-text-field | Only display the form value | ---- |
| ish-html-text-field | Only display the form value as html | ---- |
| Name | Description | Relevant templateOptions |
| -------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ish-text-input-field | Basic input field, supports all text types | type: 'text' (default),'email','tel','password' |
| ish-select-field | Basic select field | `options`: `{ value: any; label: string}[]` or Observable. `placeholder`: Translation key or string for the default selection |
| ish-textarea-field | Basic textarea field | `cols` & `rows`: Specifies the dimensions of the textarea |
| ish-checkbox-field | Basic checkbox input | ---- |
| ish-email-field | Email input field that automatically adds an e-mail validator and error messages | ---- |
| ish-password-field | Password input field that automatically adds a password validator and error messages | ---- |
| ish-phone-field | Phone number input field that automatically adds a phone number validator and error messages | ---- |
| ish-fieldset-field | Wraps fields in a `<fieldset>` tag for styling | `fieldsetClass`: Class that will be added to the fieldset tag. `childClass`: Class that will be added to the child div. `legend`: Legend element that will be added to the fieldset, use the value as the legend text. `legendClass`: Class that will be added to the legend tag. |
| ish-captcha-field | Includes the `<ish-lazy-captcha>` component and adds the relevant `formControls` to the form | `topic`: Topic that will be passed to the Captcha component. |
| ish-radio-field | Basic radio input | ---- |
| ish-plain-text-field | Only display the form value | ---- |
| ish-html-text-field | Only display the form value as html | ---- |

### Wrappers

Expand Down
1 change: 1 addition & 0 deletions src/app/shared/formly/types/fieldset-field/fieldset-field.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<fieldset [ngClass]="to.fieldsetClass">
<div [ngClass]="to.childClass">
<legend *ngIf="to.legend" [ngClass]="to.legendClass">{{ to.legend | translate }}</legend>
<formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
</div>
</fieldset>
21 changes: 21 additions & 0 deletions src/app/shared/formly/types/fieldset-field/fieldset-field.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormGroup } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { TranslateModule } from '@ngx-translate/core';

import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
import { FormlyTestingComponentsModule } from 'ish-shared/formly/dev/testing/formly-testing-components.module';
Expand All @@ -27,6 +28,7 @@ describe('Fieldset Field Component', () => {
],
}),
FormlyTestingComponentsModule,
TranslateModule.forRoot(),
],
declarations: [FieldsetFieldComponent],
}).compileComponents();
Expand All @@ -37,6 +39,10 @@ describe('Fieldset Field Component', () => {
fields: [
{
type: 'ish-fieldset-field',
templateOptions: {
legend: 'Legend text',
legendClass: 'text-muted',
},
fieldGroup: [
{
key: 'ex1',
Expand Down Expand Up @@ -80,4 +86,19 @@ describe('Fieldset Field Component', () => {
]
`);
});

it('should contain a legend in a fieldset', () => {
fixture.detectChanges();
expect(element.querySelector('fieldset > div > legend')).toBeTruthy();
});

it('should contain a legend class in a fieldset', () => {
fixture.detectChanges();
expect(element.querySelector('legend.text-muted')).toBeTruthy();
});

it('should contain a legend text in a fieldset', () => {
fixture.detectChanges();
expect(element.querySelector('legend.text-muted').textContent).toMatchInlineSnapshot(`"Legend text"`);
});
});
2 changes: 2 additions & 0 deletions src/app/shared/formly/types/fieldset-field/fieldset-field.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { FieldType } from '@ngx-formly/core';
*
* @templateOption **fieldsetClass** - used to add styles to the ``<fieldset>`` tag.
* @templateOption **childClass** - used to add styles to a child ``<div>``.
* @templateOption **legend** - used to add a legend to the ``<fieldset>`` tag, the value is displayed as the legend text and will also be translated.
* @templateOption **legendClass** - used to add styles to the ``<legend>`` tag.
*
* @usageNotes
* Control the rendered children via the ``fieldGroup`` attribute.
Expand Down
3 changes: 2 additions & 1 deletion src/app/shared/formly/types/types.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
} from '@ng-bootstrap/ng-bootstrap';
import { FormlyModule as FormlyBaseModule } from '@ngx-formly/core';
import { FormlySelectModule } from '@ngx-formly/core/select';
import { TranslateService } from '@ngx-translate/core';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { CaptchaExportsModule } from 'src/app/extensions/captcha/exports/captcha-exports.module';

import { DirectivesModule } from 'ish-core/directives.module';
Expand Down Expand Up @@ -52,6 +52,7 @@ const fieldComponents = [
IconModule,
NgbDatepickerModule,
ReactiveFormsModule,
TranslateModule,

FormlyBaseModule.forChild({
types: [
Expand Down
4 changes: 4 additions & 0 deletions src/styles/global/forms.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
fieldset {
margin-bottom: ($space-default);

legend {
font-size: $font-size-corporate;
}
}

// REQUIRED FIELDS
Expand Down

0 comments on commit 256bd7f

Please sign in to comment.