How to use the @angular/forms.NG_VALUE_ACCESSOR function in @angular/forms

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var inputtext_1 = require('../inputtext/inputtext');
var domhandler_1 = require('../dom/domhandler');
var forms_1 = require('@angular/forms');
var SPINNER_VALUE_ACCESSOR = new core_1.Provider(forms_1.NG_VALUE_ACCESSOR, {
    useExisting: core_1.forwardRef(function () { return Spinner; }),
    multi: true
});
var Spinner = (function () {
    function Spinner(el, domHandler) {
        this.el = el;
        this.domHandler = domHandler;
        this.onChange = new core_1.EventEmitter();
        this.step = 1;
        this.onModelChange = function () { };
        this.onModelTouched = function () { };
    }
    Spinner.prototype.ngAfterViewInit = function () {
        if (Math.floor(this.step) === 0) {
            this.precision = this.step.toString().split(/[,]|[.]/)[1].length;
        }

}
            if (('compositionend' === eventName)) {
                var pd_3 = (import0.ɵnodeValue(view, 6).compositionEnd() !== false);
                allowDefault = (pd_3 && allowDefault);
            }
            if (('ngModelChange' === eventName)) {
                var pd_4 = ((comp.firstName = $event) !== false);
                allowDefault = (pd_4 && allowDefault);
            }
            return allowDefault;
        }, null, null),
        import0.ɵdirectiveDef(0, null, 0, import2.DefaultValueAccessor, [
            import0.Renderer,
            import0.ElementRef
        ], null, null),
        import0.ɵproviderDef(0, null, 2, import2.NG_VALUE_ACCESSOR, function (p0_0) {
            return [p0_0];
        }, [import2.DefaultValueAccessor]),
        import0.ɵdirectiveDef(10, null, 0, import2.NgModel, [
            [
                8,
                null
            ],
            [
                8,
                null
            ],
            [
                8,
                null
            ],
            [

import0.ɵdirectiveDef(10, null, 0, import2.NgModel, [
            [
                8,
                null
            ],
            [
                8,
                null
            ],
            [
                8,
                null
            ],
            [
                2,
                import2.NG_VALUE_ACCESSOR
            ]
        ], { model: [
                0,
                'model'
            ]
        }, { update: 'ngModelChange' }),
        import0.ɵproviderDef(0, null, 3, import2.NgControl, null, [import2.NgModel]),
        import0.ɵdirectiveDef(0, null, 0, import2.NgControlStatus, [import2.NgControl], null, null),
        import0.ɵtextDef(null, ['\n\n                ']),
        import0.ɵelementDef(0, null, null, 1, 'div', [], null, null, null, null, null),
        import0.ɵtextDef(null, [
            'Current Value: ',
            ''
        ]),
        import0.ɵtextDef(null, ['\n            ']),
        import0.ɵtextDef(null, ['\n\n            ']),

var comp = view.component;
            if (('input' === eventName)) {
                var pd_0 = (import0.ɵnodeValue(view, 2).onChange($event.target.value) !== false);
                allowDefault = (pd_0 && allowDefault);
            }
            if (('blur' === eventName)) {
                var pd_1 = (import0.ɵnodeValue(view, 2).onTouched() !== false);
                allowDefault = (pd_1 && allowDefault);
            }
            return allowDefault;
        }, null, null),
        import0.ɵdirectiveDef(0, null, 0, import1.DefaultValueAccessor, [
            import0.Renderer,
            import0.ElementRef
        ], null, null),
        import0.ɵproviderDef(0, null, 2, import1.NG_VALUE_ACCESSOR, function (p0_0) {
            return [p0_0];
        }, [import1.DefaultValueAccessor]),
        import0.ɵdirectiveDef(10, null, 0, import1.FormControlName, [
            [
                3,
                import1.ControlContainer
            ],
            [
                8,
                null
            ],
            [
                8,
                null
            ],
            [

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};
var core_1 = require('@angular/core');
var forms_1 = require('@angular/forms');
var ionic_angular_1 = require('ionic-angular');
exports.MULTI_PICKER_VALUE_ACCESSOR = new core_1.Provider(forms_1.NG_VALUE_ACCESSOR, { useExisting: core_1.forwardRef(function () { return MultiPicker; }), multi: true });
var MultiPicker = (function () {
    function MultiPicker(_form, _item, _pickerCtrl) {
        this._form = _form;
        this._item = _item;
        this._pickerCtrl = _pickerCtrl;
        this._disabled = false;
        this._labelId = '';
        this._text = '';
        this._isOpen = false;
        this._value = '';
        /**
         * @private
         */
        /**
         * @input {string} The text to display on the picker's cancel button. Default: `Cancel`.
         */

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var JSONEditor = require('jsoneditor/dist/jsoneditor.js');
exports.CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: forms_1.NG_VALUE_ACCESSOR,
    useExisting: core_1.forwardRef(function () { return JsonEditorComponent; }),
    multi: true
};
var JsonEditorComponent = (function () {
    function JsonEditorComponent() {
        this.mode = 'tree';
        this.value = {};
        this.options = {};
        this.height = '250px';
    }
    JsonEditorComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        this.options.onChange = function () {
            _this.value = _this.editor.get();
            !!_this.onChangeCallback && _this.onChangeCallback(_this.value);
        };

} return ad; }, i6.View_IgGridComponent_0, i6.RenderType_IgGridComponent)), i0.ɵdid(3, 2080768, null, 2, i7.IgGridComponent, [i0.ElementRef, i0.Renderer, i0.IterableDiffers, i0.KeyValueDiffers, i0.ChangeDetectorRef], { widgetId: [0, "widgetId"], options: [1, "options"] }, null), i0.ɵqud(603979776, 1, { _columns: 1 }), i0.ɵqud(335544320, 2, { featuresList: 0 }), (_l()(), i0.ɵeld(6, 0, null, null, 23, "div", [["class", "col-md-4"]], null, null, null, null, null)), (_l()(), i0.ɵeld(7, 0, null, null, 1, "h3", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, ["Add Product"])), (_l()(), i0.ɵeld(9, 0, null, null, 20, "div", [["class", "well well-sm"]], null, null, null, null, null)), (_l()(), i0.ɵeld(10, 0, null, null, 5, "input", [["class", "form-control"], ["placeholder", "name"], ["type", "text"]], [[2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null]], [[null, "ngModelChange"], [null, "input"], [null, "blur"], [null, "compositionstart"], [null, "compositionend"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("input" === en)) {
        var pd_0 = (i0.ɵnov(_v, 11)._handleInput($event.target.value) !== false);
        ad = (pd_0 && ad);
    } if (("blur" === en)) {
        var pd_1 = (i0.ɵnov(_v, 11).onTouched() !== false);
        ad = (pd_1 && ad);
    } if (("compositionstart" === en)) {
        var pd_2 = (i0.ɵnov(_v, 11)._compositionStart() !== false);
        ad = (pd_2 && ad);
    } if (("compositionend" === en)) {
        var pd_3 = (i0.ɵnov(_v, 11)._compositionEnd($event.target.value) !== false);
        ad = (pd_3 && ad);
    } if (("ngModelChange" === en)) {
        var pd_4 = ((_co.newProduct.ProductName = $event) !== false);
        ad = (pd_4 && ad);
    } return ad; }, null, null)), i0.ɵdid(11, 16384, null, 0, i4.DefaultValueAccessor, [i0.Renderer2, i0.ElementRef, [2, i4.COMPOSITION_BUFFER_MODE]], null, null), i0.ɵprd(1024, null, i4.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i4.DefaultValueAccessor]), i0.ɵdid(13, 671744, null, 0, i4.NgModel, [[8, null], [8, null], [8, null], [6, i4.NG_VALUE_ACCESSOR]], { model: [0, "model"] }, { update: "ngModelChange" }), i0.ɵprd(2048, null, i4.NgControl, null, [i4.NgModel]), i0.ɵdid(15, 16384, null, 0, i4.NgControlStatus, [[4, i4.NgControl]], null, null), (_l()(), i0.ɵeld(16, 0, null, null, 5, "input", [["class", "form-control"], ["placeholder", "quantity per unit"], ["type", "text"]], [[2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null]], [[null, "ngModelChange"], [null, "input"], [null, "blur"], [null, "compositionstart"], [null, "compositionend"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("input" === en)) {
        var pd_0 = (i0.ɵnov(_v, 17)._handleInput($event.target.value) !== false);
        ad = (pd_0 && ad);
    } if (("blur" === en)) {
        var pd_1 = (i0.ɵnov(_v, 17).onTouched() !== false);
        ad = (pd_1 && ad);
    } if (("compositionstart" === en)) {
        var pd_2 = (i0.ɵnov(_v, 17)._compositionStart() !== false);
        ad = (pd_2 && ad);
    } if (("compositionend" === en)) {
        var pd_3 = (i0.ɵnov(_v, 17)._compositionEnd($event.target.value) !== false);
        ad = (pd_3 && ad);
    } if (("ngModelChange" === en)) {
        var pd_4 = ((_co.newProduct.QuantityPerUnit = $event) !== false);
        ad = (pd_4 && ad);
    } return ad; }, null, null)), i0.ɵdid(17, 16384, null, 0, i4.DefaultValueAccessor, [i0.Renderer2, i0.ElementRef, [2, i4.COMPOSITION_BUFFER_MODE]], null, null), i0.ɵprd(1024, null, i4.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i4.DefaultValueAccessor]), i0.ɵdid(19, 671744, null, 0, i4.NgModel, [[8, null], [8, null], [8, null], [6, i4.NG_VALUE_ACCESSOR]], { model: [0, "model"] }, { update: "ngModelChange" }), i0.ɵprd(2048, null, i4.NgControl, null, [i4.NgModel]), i0.ɵdid(21, 16384, null, 0, i4.NgControlStatus, [[4, i4.NgControl]], null, null), (_l()(), i0.ɵeld(22, 0, null, null, 6, "input", [["class", "form-control"], ["placeholder", "unit price"], ["type", "number"]], [[2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null]], [[null, "ngModelChange"], [null, "input"], [null, "blur"], [null, "compositionstart"], [null, "compositionend"], [null, "change"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("input" === en)) {
        var pd_0 = (i0.ɵnov(_v, 23)._handleInput($event.target.value) !== false);

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var inputtext_1 = require('../inputtext/inputtext');
var button_1 = require('../button/button');
var domhandler_1 = require('../dom/domhandler');
var forms_1 = require('@angular/forms');
var AUTOCOMPLETE_VALUE_ACCESSOR = new core_1.Provider(forms_1.NG_VALUE_ACCESSOR, {
    useExisting: core_1.forwardRef(function () { return AutoComplete; }),
    multi: true
});
var AutoComplete = (function () {
    function AutoComplete(el, domHandler, differs, renderer) {
        this.el = el;
        this.domHandler = domHandler;
        this.renderer = renderer;
        this.minLength = 3;
        this.delay = 300;
        this.completeMethod = new core_1.EventEmitter();
        this.onSelect = new core_1.EventEmitter();
        this.onUnselect = new core_1.EventEmitter();
        this.onDropdownClick = new core_1.EventEmitter();
        this.scrollHeight = '200px';
        this.onModelChange = function () { };

} if (("compositionend" === en)) {
        var pd_3 = (i0.ɵnov(_v, 23)._compositionEnd($event.target.value) !== false);
        ad = (pd_3 && ad);
    } if (("change" === en)) {
        var pd_4 = (i0.ɵnov(_v, 24).onChange($event.target.value) !== false);
        ad = (pd_4 && ad);
    } if (("input" === en)) {
        var pd_5 = (i0.ɵnov(_v, 24).onChange($event.target.value) !== false);
        ad = (pd_5 && ad);
    } if (("blur" === en)) {
        var pd_6 = (i0.ɵnov(_v, 24).onTouched() !== false);
        ad = (pd_6 && ad);
    } if (("ngModelChange" === en)) {
        var pd_7 = ((_co.newProduct.UnitPrice = $event) !== false);
        ad = (pd_7 && ad);
    } return ad; }, null, null)), i0.ɵdid(23, 16384, null, 0, i4.DefaultValueAccessor, [i0.Renderer2, i0.ElementRef, [2, i4.COMPOSITION_BUFFER_MODE]], null, null), i0.ɵdid(24, 16384, null, 0, i4.ɵangular_packages_forms_forms_be, [i0.Renderer2, i0.ElementRef], null, null), i0.ɵprd(1024, null, i4.NG_VALUE_ACCESSOR, function (p0_0, p1_0) { return [p0_0, p1_0]; }, [i4.DefaultValueAccessor, i4.ɵangular_packages_forms_forms_be]), i0.ɵdid(26, 671744, null, 0, i4.NgModel, [[8, null], [8, null], [8, null], [6, i4.NG_VALUE_ACCESSOR]], { model: [0, "model"] }, { update: "ngModelChange" }), i0.ɵprd(2048, null, i4.NgControl, null, [i4.NgModel]), i0.ɵdid(28, 16384, null, 0, i4.NgControlStatus, [[4, i4.NgControl]], null, null), (_l()(), i0.ɵeld(29, 0, null, null, 0, "input", [["class", "btn btn-default"], ["type", "button"], ["value", "Add"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
        var pd_0 = (_co.addRecord() !== false);
        ad = (pd_0 && ad);
    } return ad; }, null, null)), (_l()(), i0.ɵeld(30, 0, null, null, 0, "hr", [], null, null, null, null, null)), (_l()(), i0.ɵeld(31, 0, null, null, 14, "table", [["class", "table table-striped table-hover"], ["id", "simpletable"]], null, null, null, null, null)), (_l()(), i0.ɵeld(32, 0, null, null, 10, "thead", [], null, null, null, null, null)), (_l()(), i0.ɵeld(33, 0, null, null, 9, "tr", [], null, null, null, null, null)), (_l()(), i0.ɵeld(34, 0, null, null, 1, "th", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, ["Product ID"])), (_l()(), i0.ɵeld(36, 0, null, null, 1, "th", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, ["Name"])), (_l()(), i0.ɵeld(38, 0, null, null, 1, "th", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, ["Quantity per unit"])), (_l()(), i0.ɵeld(40, 0, null, null, 1, "th", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, ["Unit Price"])), (_l()(), i0.ɵeld(42, 0, null, null, 0, "th", [], null, null, null, null, null)), (_l()(), i0.ɵeld(43, 0, null, null, 2, "tbody", [], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_AppComponent_1)), i0.ɵdid(45, 278528, null, 0, i2.NgForOf, [i0.ViewContainerRef, i0.TemplateRef, i0.IterableDiffers], { ngForOf: [0, "ngForOf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; var currVal_1 = _co.gridOptions; _ck(_v, 3, 0, currVal_0, currVal_1); var currVal_9 = _co.newProduct.ProductName; _ck(_v, 13, 0, currVal_9); var currVal_17 = _co.newProduct.QuantityPerUnit; _ck(_v, 19, 0, currVal_17); var currVal_25 = _co.newProduct.UnitPrice; _ck(_v, 26, 0, currVal_25); var currVal_26 = _co.data; _ck(_v, 45, 0, currVal_26); }, function (_ck, _v) { var currVal_2 = i0.ɵnov(_v, 15).ngClassUntouched; var currVal_3 = i0.ɵnov(_v, 15).ngClassTouched; var currVal_4 = i0.ɵnov(_v, 15).ngClassPristine; var currVal_5 = i0.ɵnov(_v, 15).ngClassDirty; var currVal_6 = i0.ɵnov(_v, 15).ngClassValid; var currVal_7 = i0.ɵnov(_v, 15).ngClassInvalid; var currVal_8 = i0.ɵnov(_v, 15).ngClassPending; _ck(_v, 10, 0, currVal_2, currVal_3, currVal_4, currVal_5, currVal_6, currVal_7, currVal_8); var currVal_10 = i0.ɵnov(_v, 21).ngClassUntouched; var currVal_11 = i0.ɵnov(_v, 21).ngClassTouched; var currVal_12 = i0.ɵnov(_v, 21).ngClassPristine; var currVal_13 = i0.ɵnov(_v, 21).ngClassDirty; var currVal_14 = i0.ɵnov(_v, 21).ngClassValid; var currVal_15 = i0.ɵnov(_v, 21).ngClassInvalid; var currVal_16 = i0.ɵnov(_v, 21).ngClassPending; _ck(_v, 16, 0, currVal_10, currVal_11, currVal_12, currVal_13, currVal_14, currVal_15, currVal_16); var currVal_18 = i0.ɵnov(_v, 28).ngClassUntouched; var currVal_19 = i0.ɵnov(_v, 28).ngClassTouched; var currVal_20 = i0.ɵnov(_v, 28).ngClassPristine; var currVal_21 = i0.ɵnov(_v, 28).ngClassDirty; var currVal_22 = i0.ɵnov(_v, 28).ngClassValid; var currVal_23 = i0.ɵnov(_v, 28).ngClassInvalid; var currVal_24 = i0.ɵnov(_v, 28).ngClassPending; _ck(_v, 22, 0, currVal_18, currVal_19, currVal_20, currVal_21, currVal_22, currVal_23, currVal_24); }); }
exports.View_AppComponent_0 = View_AppComponent_0;