release(0.1.9): release 🎉

Added the required validator to the control. Now <ti-angular-tags-input required='true'> can be used

Author: AhsanAyaz

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2019 IOMechs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package.json

@@ -8,7 +8,9 @@
     "build:lib": "ng build angular-tags-input",
     "test": "ng test",
     "lint": "ng lint",
-    "publish:lib": "npm run build:lib && cd ./dist/angular-tags-input && npm publish --access public",
+    "copy:readme": "cp ./README.md ./projects/angular-tags-input/",
+    "copy:license": "cp ./LICENSE ./projects/angular-tags-input/",
+    "release": "npm run copy:readme && npm run build:lib && cd ./dist/angular-tags-input && npm publish --access public",
     "e2e": "ng e2e"
   },
   "private": true,

projects/angular-tags-input/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2019 IOMechs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

projects/angular-tags-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iomechs/angular-tags-input",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "peerDependencies": {
     "@angular/common": "^8.2.11",
     "@angular/core": "^8.2.11"

projects/angular-tags-input/src/lib/angular-tags-input.component.ts

@@ -14,7 +14,7 @@ import {
   ViewEncapsulation,
   HostListener,
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
 
 import { AngularTagsInputService } from './angular-tags-input.service';
 import { TagInputComponent } from './tag-input/tag-input.component';
@@ -28,18 +28,20 @@ import { KEY_CODES } from './constants';
   templateUrl: './angular-tags-input.component.html',
   styleUrls: ['./angular-tags-input.component.scss'],
   providers: [
-    getAngularTagsInputValueAccessor()
+    getAngularTagsInputValueAccessor(),
+    getAngularTagsInputValidatorsProvider()
   ],
   encapsulation: ViewEncapsulation.None
 })
-export class AngularTagsInputComponent implements OnInit, AfterViewInit, ControlValueAccessor, OnChanges {
+export class AngularTagsInputComponent implements OnInit, AfterViewInit, ControlValueAccessor, OnChanges, Validator {
   @ViewChild(DropdownComponent, { static: false }) dropdown: DropdownComponent;
   @Input() config: AngularTagsInputConfig;
   @Input() tagsData: Array<any> = [];
   @Input() disabled = false;
   @Input() tagsLoading: boolean;
   @Input() dropDownTemplate: TemplateRef<any> = null;
   @Input() tagItemTemplate: TemplateRef<any> = null;
+  @Input() required = false;
   @Output() tagRemoved = new EventEmitter();
   @Output() tagAdded = new EventEmitter();
   @Output() valueChanged = new EventEmitter();
@@ -181,6 +183,20 @@ export class AngularTagsInputComponent implements OnInit, AfterViewInit, Control
     this.onChange = fn;
   }
 
+  /**
+   * Validator function for the form control
+   * Doesn't do anything if the control is not required
+   * If it is required, checks if the control contains value
+   */
+  validate(control: FormControl) {
+    if (this.required === false) {
+      return null;
+    }
+    return (!!control.value && control.value.length) ? null : {
+      required: true,
+    };
+  }
+
   /**
    * @author Ahsan Ayaz
    * @desc Triggers when the tag input is focused
@@ -463,3 +479,11 @@ export function getAngularTagsInputValueAccessor() {
     multi: true,
   };
 }
+
+export function getAngularTagsInputValidatorsProvider() {
+  return {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => AngularTagsInputComponent),
+    multi: true,
+  };
+}

projects/tags-input-demo/src/app/app.component.html

@@ -304,21 +304,25 @@
 
   <div class="content" role="main">
     <form [formGroup]="simpleForm" class="main__form">
-      <ti-angular-tags-input formControlName="users" class="main__form__ti"
+      <ti-angular-tags-input formControlName="nestedData" class="main__form__ti"
         [tagsData]="sampleDataNested"
         (tagAdded)="onTagAdded($event)"
         (valueChanged)="onValChanged($event)"
         [config]="nestedTagsInputConfig"
         [dropDownTemplate]="ddNestedTemplate"
         >
       </ti-angular-tags-input>
-      <ti-angular-tags-input formControlName="users" class="main__form__ti"
+      <ti-angular-tags-input formControlName="simpleData" class="main__form__ti"
         [tagsData]="sampleDataSimple"
         (tagAdded)="onTagAdded($event)"
         (valueChanged)="onValChanged($event)"
         [config]="simpleTagsInputConfig"
+        required="true"
         >
       </ti-angular-tags-input>
+      <div class="main__form__error" *ngIf="simpleForm.get('simpleData').dirty && simpleForm.get('simpleData').hasError('required')">
+        Value for simple data is required
+      </div>
     </form>
   </div>
   <!-- Footer -->

projects/tags-input-demo/src/app/app.component.scss

@@ -4,6 +4,10 @@
     &__ti {
       width: 100%;
     }
+    &__error {
+      color: red;
+      margin-top: 10px;
+    }
   }
 }
 

projects/tags-input-demo/src/app/app.component.ts

@@ -51,7 +51,8 @@ export class AppComponent {
 
   constructor(private fb: FormBuilder, private tagsInputService: AngularTagsInputService) {
     this.simpleForm = this.fb.group({
-      users: [[], []]
+      simpleData: [[], []],
+      nestedData: [[], []]
     });
     this.tagsInputService.setDebugMode(true);
   }