ngx-form-control
Version:
Form controls for angular 6
159 lines (155 loc) • 13.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
import { BaseListControlComponent } from '../../utils/base-list-control.component';
export class FormSelectComponent extends BaseListControlComponent {
/**
* @return {?}
*/
get multiple() {
return this._multiple;
}
/**
* @param {?} value
* @return {?}
*/
set multiple(value) {
this._multiple = value;
}
/**
* @return {?}
*/
get isEmpty() {
return !this._selectedIndexes ||
!this._selectedIndexes.length ||
(1 === this._selectedIndexes.length && -1 === this._selectedIndexes[0]);
}
/**
* @return {?}
*/
get value() {
if (this.isEmpty) {
return null;
}
if (this._multiple) {
return this._selectedIndexes.map(index => this._selectOptions[index].value);
}
else {
/** @type {?} */
const index = this._selectedIndexes[0];
return this.selectOptions[index].value;
}
}
/**
* @return {?}
*/
get invalid() {
if (this.hasCustomError) {
return true;
}
if (!this.customSelect.touched) {
return false;
}
return this.customSelect.invalid || this.hasRequiredError;
}
/**
* @return {?}
*/
get valid() {
if (this.hasCustomError) {
return false;
}
if (!this.customSelect.touched) {
return false;
}
return !this.customSelect.invalid && !this.hasRequiredError;
}
/**
* @return {?}
*/
get errorMessages() {
if (this.hasRequiredError) {
return [this.requiredErrorMessage];
}
if (this.hasCustomError) {
return this.innerCustomErrorMessages;
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (!this.multiple) {
value = [value];
}
this._selectedIndexes = this.findIndexes(value);
}
/**
* @return {?}
*/
validate() {
/** @type {?} */
const result = this.customSelect.errors || {};
if (this.hasRequiredError) {
result['required'] = true;
}
else {
delete result['required'];
}
return result;
}
/**
* @return {?}
*/
reset() {
this.customSelect.reset();
}
}
FormSelectComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-form-select',
template: `<label *ngIf="label" [for]="id">{{label}}</label>
<!--suppress HtmlFormInputWithoutLabel -->
<select class="form-control"
[ngClass]="{'is-invalid': invalid, 'is-valid': valid}"
[id]="id"
[title]="title"
[required]="required"
[disabled]="disabled"
[multiple]="multiple"
[(ngModel)]="selectedIndexes"
#customSelect="ngModel"
#customSelectElement>
<option value="-1" *ngIf="placeholder">{{placeholder}}</option>
<option *ngFor="let option of selectOptions; let index = index;" [value]="index">{{option.text}}</option>
</select>
<div class="valid-feedback" *ngIf="valid && validMessage">{{validMessage}}</div>
<div class="invalid-feedback" *ngIf="invalid">
<span *ngFor="let message of errorMessages; let last = last;">
{{message}}<br *ngIf="!last">
</span>
</div>
`,
styles: [``],
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: FormSelectComponent, multi: true },
{ provide: NG_VALIDATORS, useExisting: FormSelectComponent, multi: true }
]
},] },
];
FormSelectComponent.propDecorators = {
customSelect: [{ type: ViewChild, args: ['customSelect',] }],
customSelectElement: [{ type: ViewChild, args: ['customSelectElement',] }],
multiple: [{ type: Input }]
};
if (false) {
/** @type {?} */
FormSelectComponent.prototype.customSelect;
/** @type {?} */
FormSelectComponent.prototype.customSelectElement;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1zZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWZvcm0tY29udHJvbC8iLCJzb3VyY2VzIjpbImxpYi9mb3JtLXNlbGVjdC9mb3JtLXNlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdEUsT0FBTyxFQUFDLGFBQWEsRUFBRSxpQkFBaUIsRUFBRSxPQUFPLEVBQW1CLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0YsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0seUNBQXlDLENBQUM7QUFtQ2pGLE1BQU0sMEJBQTJCLFNBQVEsd0JBQXdCOzs7O0lBSy9ELElBQUksUUFBUTtRQUNWLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO0tBQ3ZCOzs7OztJQUVELElBQWEsUUFBUSxDQUFDLEtBQWM7UUFDbEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7S0FDeEI7Ozs7SUFFRCxJQUFJLE9BQU87UUFDVCxNQUFNLENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCO1lBQzNCLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE1BQU07WUFDN0IsQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztLQUMzRTs7OztJQUVELElBQUksS0FBSztRQUNQLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQ2pCLE1BQU0sQ0FBQyxJQUFJLENBQUM7U0FDYjtRQUVELEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO1lBQ25CLE1BQU0sQ0FBQyxJQUFJLENBQUMsZ0JBQWdC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QUFJLEVBQUM7aUJBQ3hFO2FBQ0Y7OzsyQkFHRSxTQUFTLFNBQUMsY0FBYztrQ0FDeEIsU0FBUyxTQUFDLHFCQUFxQjt1QkFNL0IsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtOR19WQUxJREFUT1JTLCBOR19WQUxVRV9BQ0NFU1NPUiwgTmdNb2RlbCwgVmFsaWRhdGlvbkVycm9yc30gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQge0Jhc2VMaXN0Q29udHJvbENvbXBvbmVudH0gZnJvbSAnLi4vLi4vdXRpbHMvYmFzZS1saXN0LWNvbnRyb2wuY29tcG9uZW50JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LWZvcm0tc2VsZWN0JyxcclxuICB0ZW1wbGF0ZTogYDxsYWJlbCAqbmdJZj1cImxhYmVsXCIgW2Zvcl09XCJpZFwiPnt7bGFiZWx9fTwvbGFiZWw+XHJcblxyXG48IS0tc3VwcHJlc3MgSHRtbEZvcm1JbnB1dFdpdGhvdXRMYWJlbCAtLT5cclxuPHNlbGVjdCBjbGFzcz1cImZvcm0tY29udHJvbFwiXHJcbiAgICAgICAgW25nQ2xhc3NdPVwieydpcy1pbnZhbGlkJzogaW52YWxpZCwgJ2lzLXZhbGlkJzogdmFsaWR9XCJcclxuICAgICAgICBbaWRdPVwiaWRcIlxyXG4gICAgICAgIFt0aXRsZV09XCJ0aXRsZVwiXHJcbiAgICAgICAgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcclxuICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgICAgIFttdWx0aXBsZV09XCJtdWx0aXBsZVwiXHJcbiAgICAgICAgWyhuZ01vZGVsKV09XCJzZWxlY3RlZEluZGV4ZXNcIlxyXG4gICAgICAgICNjdXN0b21TZWxlY3Q9XCJuZ01vZGVsXCJcclxuICAgICAgICAjY3VzdG9tU2VsZWN0RWxlbWVudD5cclxuICA8b3B0aW9uIHZhbHVlPVwiLTFcIiAqbmdJZj1cInBsYWNlaG9sZGVyXCI+e3twbGFjZWhvbGRlcn19PC9vcHRpb24+XHJcbiAgPG9wdGlvbiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIHNlbGVjdE9wdGlvbnM7IGxldCBpbmRleCA9IGluZGV4O1wiIFt2YWx1ZV09XCJpbmRleFwiPnt7b3B0aW9uLnRleHR9fTwvb3B0aW9uPlxyXG48L3NlbGVjdD5cclxuXHJcbjxkaXYgY2xhc3M9XCJ2YWxpZC1mZWVkYmFja1wiICpuZ0lmPVwidmFsaWQgJiYgdmFsaWRNZXNzYWdlXCI+e3t2YWxpZE1lc3NhZ2V9fTwvZGl2PlxyXG5cclxuPGRpdiBjbGFzcz1cImludmFsaWQtZmVlZGJhY2tcIiAqbmdJZj1cImludmFsaWRcIj5cclxuICA8c3BhbiAqbmdGb3I9XCJsZXQgbWVzc2FnZSBvZiBlcnJvck1lc3NhZ2VzOyBsZXQgbGFzdCA9IGxhc3Q7XCI+XHJcbiAgICB7e21lc3NhZ2V9fTxiciAqbmdJZj1cIiFsYXN0XCI+XHJcbiAgPC9zcGFuPlxyXG48L2Rpdj5cclxuYCxcclxuICBzdHlsZXM6IFtgYF0sXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7cHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsIHVzZUV4aXN0aW5nOiBGb3JtU2VsZWN0Q29tcG9uZW50LCBtdWx0aTogdHJ1ZX0sXHJcbiAgICB7cHJvdmlkZTogTkdfVkFMSURBVE9SUywgdXNlRXhpc3Rpbmc6IEZvcm1TZWxlY3RDb21wb25lbnQsIG11bHRpOiB0cnVlfVxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIEZvcm1TZWxlY3RDb21wb25lbnQgZXh0ZW5kcyBCYXNlTGlzdENvbnRyb2xDb21wb25lbnQge1xyXG5cclxuICBAVmlld0NoaWxkKCdjdXN0b21TZWxlY3QnKSBjdXN0b21TZWxlY3Q6IE5nTW9kZWw7XHJcbiAgQFZpZXdDaGlsZCgnY3VzdG9tU2VsZWN0RWxlbWVudCcpIGN1c3RvbVNlbGVjdEVsZW1lbnQ6IEVsZW1lbnRSZWY7XHJcblxyXG4gIGdldCBtdWx0aXBsZSgpIHtcclxuICAgIHJldHVybiB0aGlzLl9tdWx0aXBsZTtcclxuICB9XHJcblxyXG4gIEBJbnB1dCgpIHNldCBtdWx0aXBsZSh2YWx1ZTogYm9vbGVhbikge1xyXG4gICAgdGhpcy5fbXVsdGlwbGUgPSB2YWx1ZTtcclxuICB9XHJcblxyXG4gIGdldCBpc0VtcHR5KCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuICF0aGlzLl9zZWxlY3RlZEluZGV4ZXMgfHxcclxuICAgICAgIXRoaXMuX3NlbGVjdGVkSW5kZXhlcy5sZW5ndGggfHxcclxuICAgICAgKDEgPT09IHRoaXMuX3NlbGVjdGVkSW5kZXhlcy5sZW5ndGggJiYgLTEgPT09IHRoaXMuX3NlbGVjdGVkSW5kZXhlc1swXSk7XHJcbiAgfVxyXG5cclxuICBnZXQgdmFsdWUoKTogYW55IHtcclxuICAgIGlmICh0aGlzLmlzRW1wdHkpIHtcclxuICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKHRoaXMuX211bHRpcGxlKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLl9zZWxlY3RlZEluZGV4ZXMubWFwKGluZGV4ID0+IHRoaXMuX3NlbGVjdE9wdGlvbnNbaW5kZXhdLnZhbHVlKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGNvbnN0IGluZGV4ID0gdGhpcy5fc2VsZWN0ZWRJbmRleGVzWzBdO1xyXG4gICAgICByZXR1cm4gdGhpcy5zZWxlY3RPcHRpb25zW2luZGV4XS52YWx1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGdldCBpbnZhbGlkKCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKHRoaXMuaGFzQ3VzdG9tRXJyb3IpIHtcclxuICAgICAgcmV0dXJuIHRydWU7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKCF0aGlzLmN1c3RvbVNlbGVjdC50b3VjaGVkKSB7XHJcbiAgICAgIHJldHVybiBmYWxzZTtcclxuICAgIH1cclxuXHJcbiAgICByZXR1cm4gdGhpcy5jdXN0b21TZWxlY3QuaW52YWxpZCB8fCB0aGlzLmhhc1JlcXVpcmVkRXJyb3I7XHJcbiAgfVxyXG5cclxuICBnZXQgdmFsaWQoKTogYm9vbGVhbiB7XHJcbiAgICBpZiAodGhpcy5oYXNDdXN0b21FcnJvcikge1xyXG4gICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKCF0aGlzLmN1c3RvbVNlbGVjdC50b3VjaGVkKSB7XHJcbiAgICAgIHJldHVybiBmYWxzZTtcclxuICAgIH1cclxuXHJcbiAgICByZXR1cm4gIXRoaXMuY3VzdG9tU2VsZWN0LmludmFsaWQgJiYgIXRoaXMuaGFzUmVxdWlyZWRFcnJvcjtcclxuICB9XHJcblxyXG4gIGdldCBlcnJvck1lc3NhZ2VzKCk6IEFycmF5PHN0cmluZz4ge1xyXG4gICAgaWYgKHRoaXMuaGFzUmVxdWlyZWRFcnJvcikge1xyXG4gICAgICByZXR1cm4gW3RoaXMucmVxdWlyZWRFcnJvck1lc3NhZ2VdO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICh0aGlzLmhhc0N1c3RvbUVycm9yKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmlubmVyQ3VzdG9tRXJyb3JNZXNzYWdlcztcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSB8IEFycmF5PGFueT4pOiB2b2lkIHtcclxuICAgIGlmICghdGhpcy5tdWx0aXBsZSkge1xyXG4gICAgICB2YWx1ZSA9IFt2YWx1ZV07XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5fc2VsZWN0ZWRJbmRleGVzID0gdGhpcy5maW5kSW5kZXhlcyh2YWx1ZSk7XHJcbiAgfVxyXG5cclxuICB2YWxpZGF0ZSgpOiBWYWxpZGF0aW9uRXJyb3JzIHtcclxuICAgIGNvbnN0IHJlc3VsdCA9IHRoaXMuY3VzdG9tU2VsZWN0LmVycm9ycyB8fCB7fTtcclxuXHJcbiAgICBpZiAodGhpcy5oYXNSZXF1aXJlZEVycm9yKSB7XHJcbiAgICAgIHJlc3VsdFsncmVxdWlyZWQnXSA9IHRydWU7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICBkZWxldGUgcmVzdWx0WydyZXF1aXJlZCddO1xyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiByZXN1bHQ7XHJcbiAgfVxyXG5cclxuICByZXNldCgpIHtcclxuICAgIHRoaXMuY3VzdG9tU2VsZWN0LnJlc2V0KCk7XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=