First:
\n\t *Middle:
\n\t *Last:
\n\t *{{ mgName.value | json }}\n\t *
Name is {{mgName?.valid ? \"valid\" : \"invalid\"}}
\n\t *{{ f.value | json }}\n\t *
Element with existing control:
\n\t *Value of existing control: {{loginControl.value}}
\n\t *Login:
\n\t *Password:
\n\t *Value:
\n\t *{{ loginForm.value | json}}\n\t *
First:
\n\t *Middle:
\n\t *Last:
\n\t *{{ myForm.get('name') | json }}\n\t *
Name is {{myForm.get('name')?.valid ? \"valid\" : \"invalid\"}}
\n\t *{{ myForm | json }}\n\t *
Login
\n\t *Password
\n\t *Confirm password
\n\t *{{value}}\n\t * `,\n\t * directives: [REACTIVE_FORM_DIRECTIVES]\n\t * })\n\t * export class App {\n\t * loginForm: FormGroup;\n\t *\n\t * constructor(builder: FormBuilder) {\n\t * this.loginForm = builder.group({\n\t * login: [\"\", Validators.required],\n\t * passwordRetry: builder.group({\n\t * password: [\"\", Validators.required],\n\t * passwordConfirmation: [\"\", Validators.required, asyncValidator]\n\t * })\n\t * });\n\t * }\n\t *\n\t * get value(): string {\n\t * return JSON.stringify(this.loginForm.value, null, 2);\n\t * }\n\t * }\n\t * ```\n\t *\n\t * @stable\n\t */\n\t var FormBuilder = (function () {\n\t function FormBuilder() {\n\t }\n\t /**\n\t * Construct a new {@link FormGroup} with the given map of configuration.\n\t * Valid keys for the `extra` parameter map are `optionals` and `validator`.\n\t *\n\t * See the {@link FormGroup} constructor for more details.\n\t */\n\t FormBuilder.prototype.group = function (controlsConfig, extra) {\n\t if (extra === void 0) { extra = null; }\n\t var controls = this._reduceControls(controlsConfig);\n\t var validator = isPresent(extra) ? StringMapWrapper.get(extra, 'validator') : null;\n\t var asyncValidator = isPresent(extra) ? StringMapWrapper.get(extra, 'asyncValidator') : null;\n\t return new FormGroup(controls, validator, asyncValidator);\n\t };\n\t /**\n\t * Construct a new {@link FormControl} with the given `formState`,`validator`, and\n\t * `asyncValidator`.\n\t */\n\t FormBuilder.prototype.control = function (formState, validator, asyncValidator) {\n\t if (validator === void 0) { validator = null; }\n\t if (asyncValidator === void 0) { asyncValidator = null; }\n\t return new FormControl(formState, validator, asyncValidator);\n\t };\n\t /**\n\t * Construct an array of {@link FormControl}s from the given `controlsConfig` array of\n\t * configuration, with the given optional `validator` and `asyncValidator`.\n\t */\n\t FormBuilder.prototype.array = function (controlsConfig, validator, asyncValidator) {\n\t var _this = this;\n\t if (validator === void 0) { validator = null; }\n\t if (asyncValidator === void 0) { asyncValidator = null; }\n\t var controls = controlsConfig.map(function (c) { return _this._createControl(c); });\n\t return new FormArray(controls, validator, asyncValidator);\n\t };\n\t /** @internal */\n\t FormBuilder.prototype._reduceControls = function (controlsConfig) {\n\t var _this = this;\n\t var controls = {};\n\t StringMapWrapper.forEach(controlsConfig, function (controlConfig, controlName) {\n\t controls[controlName] = _this._createControl(controlConfig);\n\t });\n\t return controls;\n\t };\n\t /** @internal */\n\t FormBuilder.prototype._createControl = function (controlConfig) {\n\t if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||\n\t controlConfig instanceof FormArray) {\n\t return controlConfig;\n\t }\n\t else if (isArray(controlConfig)) {\n\t var value = controlConfig[0];\n\t var validator = controlConfig.length > 1 ? controlConfig[1] : null;\n\t var asyncValidator = controlConfig.length > 2 ? controlConfig[2] : null;\n\t return this.control(value, validator, asyncValidator);\n\t }\n\t else {\n\t return this.control(controlConfig);\n\t }\n\t };\n\t FormBuilder.decorators = [\n\t { type: _angular_core.Injectable },\n\t ];\n\t /** @nocollapse */\n\t FormBuilder.ctorParameters = [];\n\t return FormBuilder;\n\t }());\n\t\n\t var SHARED_FORM_DIRECTIVES = [\n\t NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,\n\t CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,\n\t RadioControlValueAccessor, NgControlStatus, NgControlStatusGroup, RequiredValidator,\n\t MinLengthValidator, MaxLengthValidator, PatternValidator\n\t ];\n\t var TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm];\n\t var REACTIVE_DRIVEN_DIRECTIVES = [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];\n\t /**\n\t * Internal module used for sharing directives between FormsModule and ReactiveFormsModule\n\t */\n\t var InternalFormsSharedModule = (function () {\n\t function InternalFormsSharedModule() {\n\t }\n\t InternalFormsSharedModule.decorators = [\n\t { type: _angular_core.NgModule, args: [{ declarations: SHARED_FORM_DIRECTIVES, exports: SHARED_FORM_DIRECTIVES },] },\n\t ];\n\t /** @nocollapse */\n\t InternalFormsSharedModule.ctorParameters = [];\n\t return InternalFormsSharedModule;\n\t }());\n\t\n\t /**\n\t * The ng module for forms.\n\t * @stable\n\t */\n\t var FormsModule = (function () {\n\t function FormsModule() {\n\t }\n\t FormsModule.decorators = [\n\t { type: _angular_core.NgModule, args: [{\n\t declarations: TEMPLATE_DRIVEN_DIRECTIVES,\n\t providers: [RadioControlRegistry],\n\t exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]\n\t },] },\n\t ];\n\t /** @nocollapse */\n\t FormsModule.ctorParameters = [];\n\t return FormsModule;\n\t }());\n\t /**\n\t * The ng module for reactive forms.\n\t * @stable\n\t */\n\t var ReactiveFormsModule = (function () {\n\t function ReactiveFormsModule() {\n\t }\n\t ReactiveFormsModule.decorators = [\n\t { type: _angular_core.NgModule, args: [{\n\t declarations: [REACTIVE_DRIVEN_DIRECTIVES],\n\t providers: [FormBuilder, RadioControlRegistry],\n\t exports: [InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]\n\t },] },\n\t ];\n\t /** @nocollapse */\n\t ReactiveFormsModule.ctorParameters = [];\n\t return ReactiveFormsModule;\n\t }());\n\t\n\t exports.AbstractControlDirective = AbstractControlDirective;\n\t exports.AbstractFormGroupDirective = AbstractFormGroupDirective;\n\t exports.CheckboxControlValueAccessor = CheckboxControlValueAccessor;\n\t exports.ControlContainer = ControlContainer;\n\t exports.NG_VALUE_ACCESSOR = NG_VALUE_ACCESSOR;\n\t exports.DefaultValueAccessor = DefaultValueAccessor;\n\t exports.NgControl = NgControl;\n\t exports.NgControlStatus = NgControlStatus;\n\t exports.NgControlStatusGroup = NgControlStatusGroup;\n\t exports.NgForm = NgForm;\n\t exports.NgModel = NgModel;\n\t exports.NgModelGroup = NgModelGroup;\n\t exports.FormControlDirective = FormControlDirective;\n\t exports.FormControlName = FormControlName;\n\t exports.FormGroupDirective = FormGroupDirective;\n\t exports.FormArrayName = FormArrayName;\n\t exports.FormGroupName = FormGroupName;\n\t exports.NgSelectOption = NgSelectOption;\n\t exports.SelectControlValueAccessor = SelectControlValueAccessor;\n\t exports.SelectMultipleControlValueAccessor = SelectMultipleControlValueAccessor;\n\t exports.MaxLengthValidator = MaxLengthValidator;\n\t exports.MinLengthValidator = MinLengthValidator;\n\t exports.PatternValidator = PatternValidator;\n\t exports.RequiredValidator = RequiredValidator;\n\t exports.FormBuilder = FormBuilder;\n\t exports.AbstractControl = AbstractControl;\n\t exports.FormArray = FormArray;\n\t exports.FormControl = FormControl;\n\t exports.FormGroup = FormGroup;\n\t exports.NG_ASYNC_VALIDATORS = NG_ASYNC_VALIDATORS;\n\t exports.NG_VALIDATORS = NG_VALIDATORS;\n\t exports.Validators = Validators;\n\t exports.FormsModule = FormsModule;\n\t exports.ReactiveFormsModule = ReactiveFormsModule;\n\t\n\t}));\n\t\n\t/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))\n\n/***/ },\n/* 27 */,\n/* 28 */,\n/* 29 */,\n/* 30 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\tvar core_1 = __webpack_require__(2);\n\t__webpack_require__(31);\n\tvar AppComponent = (function () {\n\t function AppComponent() {\n\t // Do something with api\n\t }\n\t AppComponent = __decorate([\n\t core_1.Component({\n\t selector: 'my-app',\n\t template: __webpack_require__(35),\n\t styles: [__webpack_require__(36)],\n\t }), \n\t __metadata('design:paramtypes', [])\n\t ], AppComponent);\n\t return AppComponent;\n\t}());\n\texports.AppComponent = AppComponent;\n\n\n/***/ },\n/* 31 */\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ },\n/* 32 */,\n/* 33 */,\n/* 34 */,\n/* 35 */\n/***/ function(module, exports) {\n\n\tmodule.exports = \"
Submit the form to see the data object Angular builds
\n *Login:
\n *Password:
\n *First name:
\n *Last name:
\n *Form data submitted:
\n *{{data}}\n *
First:
\n *Middle:
\n *Last:
\n *{{ mgName.value | json }}\n *
Name is {{mgName?.valid ? \"valid\" : \"invalid\"}}
\n *{{ f.value | json }}\n *
Element with existing control:
\n *Value of existing control: {{loginControl.value}}
\n *Login:
\n *Password:
\n *Value:
\n *{{ loginForm.value | json}}\n *
First:
\n *Middle:
\n *Last:
\n *{{ myForm.get('name') | json }}\n *
Name is {{myForm.get('name')?.valid ? \"valid\" : \"invalid\"}}
\n *{{ myForm | json }}\n *
Login
\n *Password
\n *Confirm password
\n *{{value}}\n * `,\n * directives: [REACTIVE_FORM_DIRECTIVES]\n * })\n * export class App {\n * loginForm: FormGroup;\n *\n * constructor(builder: FormBuilder) {\n * this.loginForm = builder.group({\n * login: [\"\", Validators.required],\n * passwordRetry: builder.group({\n * password: [\"\", Validators.required],\n * passwordConfirmation: [\"\", Validators.required, asyncValidator]\n * })\n * });\n * }\n *\n * get value(): string {\n * return JSON.stringify(this.loginForm.value, null, 2);\n * }\n * }\n * ```\n *\n * @stable\n */\n var FormBuilder = (function () {\n function FormBuilder() {\n }\n /**\n * Construct a new {@link FormGroup} with the given map of configuration.\n * Valid keys for the `extra` parameter map are `optionals` and `validator`.\n *\n * See the {@link FormGroup} constructor for more details.\n */\n FormBuilder.prototype.group = function (controlsConfig, extra) {\n if (extra === void 0) { extra = null; }\n var controls = this._reduceControls(controlsConfig);\n var validator = isPresent(extra) ? StringMapWrapper.get(extra, 'validator') : null;\n var asyncValidator = isPresent(extra) ? StringMapWrapper.get(extra, 'asyncValidator') : null;\n return new FormGroup(controls, validator, asyncValidator);\n };\n /**\n * Construct a new {@link FormControl} with the given `formState`,`validator`, and\n * `asyncValidator`.\n */\n FormBuilder.prototype.control = function (formState, validator, asyncValidator) {\n if (validator === void 0) { validator = null; }\n if (asyncValidator === void 0) { asyncValidator = null; }\n return new FormControl(formState, validator, asyncValidator);\n };\n /**\n * Construct an array of {@link FormControl}s from the given `controlsConfig` array of\n * configuration, with the given optional `validator` and `asyncValidator`.\n */\n FormBuilder.prototype.array = function (controlsConfig, validator, asyncValidator) {\n var _this = this;\n if (validator === void 0) { validator = null; }\n if (asyncValidator === void 0) { asyncValidator = null; }\n var controls = controlsConfig.map(function (c) { return _this._createControl(c); });\n return new FormArray(controls, validator, asyncValidator);\n };\n /** @internal */\n FormBuilder.prototype._reduceControls = function (controlsConfig) {\n var _this = this;\n var controls = {};\n StringMapWrapper.forEach(controlsConfig, function (controlConfig, controlName) {\n controls[controlName] = _this._createControl(controlConfig);\n });\n return controls;\n };\n /** @internal */\n FormBuilder.prototype._createControl = function (controlConfig) {\n if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||\n controlConfig instanceof FormArray) {\n return controlConfig;\n }\n else if (isArray(controlConfig)) {\n var value = controlConfig[0];\n var validator = controlConfig.length > 1 ? controlConfig[1] : null;\n var asyncValidator = controlConfig.length > 2 ? controlConfig[2] : null;\n return this.control(value, validator, asyncValidator);\n }\n else {\n return this.control(controlConfig);\n }\n };\n FormBuilder.decorators = [\n { type: _angular_core.Injectable },\n ];\n /** @nocollapse */\n FormBuilder.ctorParameters = [];\n return FormBuilder;\n }());\n\n var SHARED_FORM_DIRECTIVES = [\n NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,\n CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,\n RadioControlValueAccessor, NgControlStatus, NgControlStatusGroup, RequiredValidator,\n MinLengthValidator, MaxLengthValidator, PatternValidator\n ];\n var TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm];\n var REACTIVE_DRIVEN_DIRECTIVES = [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];\n /**\n * Internal module used for sharing directives between FormsModule and ReactiveFormsModule\n */\n var InternalFormsSharedModule = (function () {\n function InternalFormsSharedModule() {\n }\n InternalFormsSharedModule.decorators = [\n { type: _angular_core.NgModule, args: [{ declarations: SHARED_FORM_DIRECTIVES, exports: SHARED_FORM_DIRECTIVES },] },\n ];\n /** @nocollapse */\n InternalFormsSharedModule.ctorParameters = [];\n return InternalFormsSharedModule;\n }());\n\n /**\n * The ng module for forms.\n * @stable\n */\n var FormsModule = (function () {\n function FormsModule() {\n }\n FormsModule.decorators = [\n { type: _angular_core.NgModule, args: [{\n declarations: TEMPLATE_DRIVEN_DIRECTIVES,\n providers: [RadioControlRegistry],\n exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]\n },] },\n ];\n /** @nocollapse */\n FormsModule.ctorParameters = [];\n return FormsModule;\n }());\n /**\n * The ng module for reactive forms.\n * @stable\n */\n var ReactiveFormsModule = (function () {\n function ReactiveFormsModule() {\n }\n ReactiveFormsModule.decorators = [\n { type: _angular_core.NgModule, args: [{\n declarations: [REACTIVE_DRIVEN_DIRECTIVES],\n providers: [FormBuilder, RadioControlRegistry],\n exports: [InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]\n },] },\n ];\n /** @nocollapse */\n ReactiveFormsModule.ctorParameters = [];\n return ReactiveFormsModule;\n }());\n\n exports.AbstractControlDirective = AbstractControlDirective;\n exports.AbstractFormGroupDirective = AbstractFormGroupDirective;\n exports.CheckboxControlValueAccessor = CheckboxControlValueAccessor;\n exports.ControlContainer = ControlContainer;\n exports.NG_VALUE_ACCESSOR = NG_VALUE_ACCESSOR;\n exports.DefaultValueAccessor = DefaultValueAccessor;\n exports.NgControl = NgControl;\n exports.NgControlStatus = NgControlStatus;\n exports.NgControlStatusGroup = NgControlStatusGroup;\n exports.NgForm = NgForm;\n exports.NgModel = NgModel;\n exports.NgModelGroup = NgModelGroup;\n exports.FormControlDirective = FormControlDirective;\n exports.FormControlName = FormControlName;\n exports.FormGroupDirective = FormGroupDirective;\n exports.FormArrayName = FormArrayName;\n exports.FormGroupName = FormGroupName;\n exports.NgSelectOption = NgSelectOption;\n exports.SelectControlValueAccessor = SelectControlValueAccessor;\n exports.SelectMultipleControlValueAccessor = SelectMultipleControlValueAccessor;\n exports.MaxLengthValidator = MaxLengthValidator;\n exports.MinLengthValidator = MinLengthValidator;\n exports.PatternValidator = PatternValidator;\n exports.RequiredValidator = RequiredValidator;\n exports.FormBuilder = FormBuilder;\n exports.AbstractControl = AbstractControl;\n exports.FormArray = FormArray;\n exports.FormControl = FormControl;\n exports.FormGroup = FormGroup;\n exports.NG_ASYNC_VALIDATORS = NG_ASYNC_VALIDATORS;\n exports.NG_VALIDATORS = NG_VALIDATORS;\n exports.Validators = Validators;\n exports.FormsModule = FormsModule;\n exports.ReactiveFormsModule = ReactiveFormsModule;\n\n}));\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/@angular/forms/bundles/forms.umd.js\n ** module id = 26\n ** module chunks = 0\n **/","import { Component } from '@angular/core';\n\nimport '../style/app.scss';\n\n@Component({\n selector: 'my-app', //