diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html index 76b734b50..4ae396052 100644 --- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html +++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html @@ -15,6 +15,8 @@ [placeholder]="placeholder" [rows]="rows" [formControl]="control" + [maxlength]="maxlength" + [minlength]="minlength" > diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts index 694baac4f..8d841e044 100644 --- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts @@ -67,7 +67,37 @@ describe('GoTextAreaComponent', () => { component.ngOnInit(); expect(component.id).toBeDefined(); - expect(component.id).toContain('text-area-') + expect(component.id).toContain('text-area-'); + }); + + it('doesn\'n error if no minlength passed in', () => { + component.minlength = undefined; + component.maxlength = 20; + + component.ngOnInit(); + + expect(component.minlength).toBe(undefined); + expect(component.maxlength).toBe(20); + }); + + it('doesn\'n error if no maxlength passed in', () => { + component.minlength = 20; + component.maxlength = undefined; + + component.ngOnInit(); + + expect(component.minlength).toBe(20); + expect(component.maxlength).toBe(undefined); + }); + + it('sets minlength to 0 if minlength is greater than maxlength', () => { + component.minlength = 150; + component.maxlength = 100; + + component.ngOnInit(); + + expect(component.minlength).toBe(0); + expect(component.maxlength).toBe(100); }); }); }); diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts index c00d0d3ec..01810964f 100644 --- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts +++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts @@ -13,6 +13,8 @@ export class GoTextAreaComponent implements OnInit { @Input() key: string; @Input() hints: Array; @Input() label: string; + @Input() maxlength: number; + @Input() minlength: number; @Input() placeholder: string = ''; @Input() theme: 'light' | 'dark' = 'light'; @Input() rows: number; @@ -21,5 +23,13 @@ export class GoTextAreaComponent implements OnInit { ngOnInit(): void { this.id = this.key || generateId(this.label, 'text-area'); + + this.validateMinMax(); + } + + private validateMinMax(): void { + if (this.maxlength && this.minlength && this.minlength > this.maxlength) { + this.minlength = 0; + } } } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html index 93a84e2ce..f57d7e5a4 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html @@ -345,4 +345,80 @@

Code

+ + + +

Component Max Length

+ +
+
+ +
+

+ The text area component's max length can be set via + @Input() maxlength: number; and the + maxlength attribute. +

+
+ +
+
+
+

View

+ + +
+
+

Code

+ + +
+
+
+ +
+
+ + + +

Component Min Length

+ +
+
+ +
+

+ The text area component's min length can be set via + @Input() minlength: number; and the + minlength attribute. +

+
+ +
+
+
+

View

+ + +
+
+

Code

+ + +
+
+
+ +
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts index 43a151d55..799748763 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts @@ -15,6 +15,8 @@ export class TextAreaDocsComponent implements OnInit { message7: FormControl = new FormControl(''); message8: FormControl = new FormControl(''); message9: FormControl = new FormControl(''); + message10: FormControl = new FormControl(''); + message11: FormControl = new FormControl(''); hints: Array = [ 'Please type your message here', @@ -105,6 +107,22 @@ export class TextAreaDocsComponent implements OnInit { `; + basicMaxLengthExample: string = ` + + + `; + + basicMinLengthExample: string = ` + + + `; + constructor(private subNavService: SubNavService) { this.subNavService.pageTitle = 'Textarea'; this.subNavService.linkToSource = 'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-text-area';