5 lines
30 KiB
JSON
5 lines
30 KiB
JSON
{
|
|
"id": "api/forms/NgModel",
|
|
"title": "NgModel",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/forms\", \"name\": \"@angular/forms\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/forms/NgModel\", \"name\": \"NgModel\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/forms\">@angular/forms</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/directives/ng_model.ts?message=docs(forms)%3A%20describe%20your%20change...#L47-L332\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/ng_model.ts#L47-L332\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"ngmodel\">NgModel<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#ngmodel\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label directive\">directive</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Creates a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> instance from a domain model and binds it\nto a form control element.</p>\n\n <p><a href=\"api/forms/NgModel#description\">See more...</a></p>\n </section>\n \n \n \n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><code><a href=\"api/forms/RadioControlValueAccessor\" class=\"code-anchor\">RadioControlValueAccessor</a></code></p>\n</li>\n <li><p><code><a href=\"api/forms/SelectControlValueAccessor\" class=\"code-anchor\">SelectControlValueAccessor</a></code></p>\n</li>\n </ul>\n</section>\n\n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#ngmodule\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n <li>\n <a href=\"api/forms/FormsModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">FormsModule</code-example>\n </a>\n </li>\n \n</ul>\n\n\n \n<section class=\"selector-list\">\n <h2 id=\"selectors\">Selectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code>[<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>]<i>:not([formControlName])</i><i>:not([formControl])</i></code></li>\n \n </ul>\n \n</section>\n\n\n\n \n\n<section class=\"instance-properties\">\n <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"control\"></a>\n <code class=\"\"><span class=\"member-name\">control</span>: <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n \n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"name\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">name</span>: string</code>\n </td>\n <td>\n \n <p>Tracks the name bound to the directive. If a parent form exists, it\nuses this name as a key to retrieve this control's value.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"isDisabled\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>('disabled')</span><br><span class=\"member-name\">isDisabled</span>: boolean</code>\n </td>\n <td>\n \n <p>Tracks whether the control is disabled.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"model\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>('<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>')</span><br><span class=\"member-name\">model</span>: any</code>\n </td>\n <td>\n \n <p>Tracks the value bound to this directive.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"options\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>('ngModelOptions')</span><br><span class=\"member-name\">options</span>: {\n name?: string;\n standalone?: boolean;\n updateOn?: FormHooks;\n}</code>\n </td>\n <td>\n \n <p>Tracks the configuration options for this <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> instance.</p>\n\n <p><strong>name</strong>: An alternative to setting the name attribute on the form control element. See\nthe <a href=\"api/forms/NgModel#using-ngmodel-on-a-standalone-control\">example</a> for using <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code>\nas a standalone control.</p>\n<p><strong>standalone</strong>: When set to true, the <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> will not register itself with its parent form,\nand acts as if it's not in the form. Defaults to false. If no parent form exists, this option\nhas no effect.</p>\n<p><strong>updateOn</strong>: Defines the event upon which the form control value and validity update.\nDefaults to 'change'. Possible values: <code>'change'</code> | <code>'blur'</code> | <code>'submit'</code>.</p>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"update\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>('ngModelChange')</span><br><span class=\"member-name\">update</span>: <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code>\n </td>\n <td>\n \n <p>Event emitter for producing the <code>ngModelChange</code> event after\nthe view model updates.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"path\"></a>\n <code class=\"\"><span class=\"member-name\">path</span>: string[]</code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n <p>Returns an array that represents the path from the top-level form to this control.\nEach index is the string name of the control on that level.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"formDirective\"></a>\n <code class=\"\"><span class=\"member-name\">formDirective</span>: any</code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n <p>The top-level directive for this control if present, otherwise null.</p>\n\n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\n<section class=\"inherited-members-list\">\n <h3 id=\"inherited-from-ngcontrol\">Inherited from <code><a class=\"code-anchor\" href=\"api/forms/NgControl\">NgControl</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#inherited-from-ngcontrol\"><i class=\"material-icons\">link</i></a></h3>\n <ul>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/NgControl#name\"><span class=\"member-name\">name</span>: string | number | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/NgControl#valueAccessor\"><span class=\"member-name\">valueAccessor</span>: ControlValueAccessor | null</a></code>\n </li>\n \n </ul>\n</section>\n\n\n\n<section class=\"inherited-members-list\">\n <h3 id=\"inherited-from-abstractcontroldirective\">Inherited from <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective\">AbstractControlDirective</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#inherited-from-abstractcontroldirective\"><i class=\"material-icons\">link</i></a></h3>\n <ul>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#control\">abstract <span class=\"member-name\">control</span>: AbstractControl | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#value\"><span class=\"member-name\">value</span>: any</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#valid\"><span class=\"member-name\">valid</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#invalid\"><span class=\"member-name\">invalid</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#pending\"><span class=\"member-name\">pending</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#disabled\"><span class=\"member-name\">disabled</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#enabled\"><span class=\"member-name\">enabled</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#errors\"><span class=\"member-name\">errors</span>: ValidationErrors | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#pristine\"><span class=\"member-name\">pristine</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#dirty\"><span class=\"member-name\">dirty</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#touched\"><span class=\"member-name\">touched</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#status\"><span class=\"member-name\">status</span>: string | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#untouched\"><span class=\"member-name\">untouched</span>: boolean | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#statusChanges\"><span class=\"member-name\">statusChanges</span>: Observable<any> | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#valueChanges\"><span class=\"member-name\">valueChanges</span>: Observable<any> | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#path\"><span class=\"member-name\">path</span>: string[] | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#validator\"><span class=\"member-name\">validator</span>: ValidatorFn | null</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#asyncValidator\"><span class=\"member-name\">asyncValidator</span>: AsyncValidatorFn | null</a></code>\n </li>\n \n </ul>\n</section>\n\n\n\n\n\n\n \n<section class=\"export-as\">\n <h2 id=\"template-variable-references\">Template variable references<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#template-variable-references\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table export-as-table\">\n <thead>\n <tr>\n <th>Identifier</th>\n <th>Usage</th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"export-as\">\n <td><code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code></td>\n <td><code>#myTemplateVar=\"<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>\"</code></td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\n\n \n <section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>The <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> instance tracks the value, user interaction, and\nvalidation status of the control and keeps the view synced with the model. If used\nwithin a parent form, the directive also registers itself with the form as a child\ncontrol.</p>\n<p>This directive is used by itself or as part of a larger form. Use the\n<code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> selector to activate it.</p>\n<p>It accepts a domain model as an optional <code><a href=\"api/core/Input\" class=\"code-anchor\">Input</a></code>. If you have a one-way binding\nto <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> with <code>[]</code> syntax, changing the domain model's value in the component\nclass sets the value in the view. If you have a two-way binding with <code>[()]</code> syntax\n(also known as 'banana-in-a-box syntax'), the value in the UI always syncs back to\nthe domain model in your class.</p>\n<p>To inspect the properties of the associated <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> (like the validity state),\nexport the directive into a local template variable using <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> as the key (ex:\n<code>#myVar=\"<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>\"</code>). You can then access the control using the directive's <code>control</code> property.\nHowever, the most commonly used properties (like <code>valid</code> and <code>dirty</code>) also exist on the control\nfor direct access. See a full list of properties directly available in\n<code><a href=\"api/forms/AbstractControlDirective\" class=\"code-anchor\">AbstractControlDirective</a></code>.</p>\n\n <h3 id=\"using-ngmodel-on-a-standalone-control\">Using ngModel on a standalone control<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#using-ngmodel-on-a-standalone-control\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following examples show a simple standalone control using <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code>:</p>\n<code-example path=\"forms/ts/simpleNgModel/simple_ng_model_example.ts\" region=\"Component\">\nimport {<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>} from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'example-app',\n template: `\n <input [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"name\" #ctrl=\"<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>\" required>\n\n <p>Value: {{ name }}</p>\n <p>Valid: {{ ctrl.valid }}</p>\n\n <button (click)=\"setValue()\">Set value</button>\n `,\n})\nexport class SimpleNgModelComp {\n name: string = '';\n\n setValue() {\n this.name = 'Nancy';\n }\n}\n\n</code-example>\n<p>When using the <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> within <code><form></code> tags, you'll also need to supply a <code>name</code> attribute\nso that the control can be registered with the parent form under that name.</p>\n<p>In the context of a parent form, it's often unnecessary to include one-way or two-way binding,\nas the parent form syncs the value for you. You access its properties by exporting it into a\nlocal template variable using <code><a href=\"api/forms/NgForm\" class=\"code-anchor\">ngForm</a></code> such as (<code>#f=\"<a href=\"api/forms/NgForm\" class=\"code-anchor\">ngForm</a>\"</code>). Use the variable where\nneeded on form submission.</p>\n<p>If you do need to populate initial values into your form, using a one-way binding for\n<code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> tends to be sufficient as long as you use the exported form's value rather\nthan the domain model's value on submit.</p>\n<h3 id=\"using-ngmodel-within-a-form\">Using ngModel within a form<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#using-ngmodel-within-a-form\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following example shows controls using <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> within a form:</p>\n<code-example path=\"forms/ts/simpleForm/simple_form_example.ts\" region=\"Component\">\nimport {<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>} from '@angular/core';\nimport {<a href=\"api/forms/NgForm\" class=\"code-anchor\">NgForm</a>} from '@angular/forms';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'example-app',\n template: `\n <form #f=\"<a href=\"api/forms/NgForm\" class=\"code-anchor\">ngForm</a>\" (ngSubmit)=\"onSubmit(f)\" novalidate>\n <input name=\"first\" <a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a> required #first=\"<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>\">\n <input name=\"last\" <a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>>\n <button>Submit</button>\n </form>\n\n <p>First name value: {{ first.value }}</p>\n <p>First name valid: {{ first.valid }}</p>\n <p><a href=\"api/forms/Form\" class=\"code-anchor\">Form</a> value: {{ f.value | <a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a> }}</p>\n <p><a href=\"api/forms/Form\" class=\"code-anchor\">Form</a> valid: {{ f.valid }}</p>\n `,\n})\nexport class SimpleFormComp {\n onSubmit(f: <a href=\"api/forms/NgForm\" class=\"code-anchor\">NgForm</a>) {\n console.log(f.value); // { first: '', last: '' }\n console.log(f.valid); // false\n }\n}\n\n</code-example>\n<h3 id=\"using-a-standalone-ngmodel-within-a-group\">Using a standalone ngModel within a group<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#using-a-standalone-ngmodel-within-a-group\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following example shows you how to use a standalone ngModel control\nwithin a form. This controls the display of the form, but doesn't contain form data.</p>\n<code-example language=\"html\">\n<form>\n <input name=\"login\" <a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a> placeholder=\"Login\">\n <input type=\"checkbox\" <a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a> [ngModelOptions]=\"{standalone: true}\"> Show more options?\n</form>\n<!-- form value: {login: ''} -->\n</code-example>\n<h3 id=\"setting-the-ngmodel-name-attribute-through-options\">Setting the ngModel <code>name</code> attribute through options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#setting-the-ngmodel-name-attribute-through-options\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following example shows you an alternate way to set the name attribute. Here,\nan attribute identified as name is used within a custom form control component. To still be able\nto specify the NgModel's name, you must specify it using the <code>ngModelOptions</code> input instead.</p>\n<code-example language=\"html\">\n<form>\n <my-custom-form-control name=\"Nancy\" <a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a> [ngModelOptions]=\"{name: 'user'}\">\n </my-custom-form-control>\n</form>\n<!-- form value: {user: ''} -->\n</code-example>\n\n </section>\n \n\n \n\n \n\n \n\n<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"viewToModelUpdate\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"viewtomodelupdate\">\n viewToModelUpdate()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#viewtomodelupdate\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/directives/ng_model.ts?message=docs(forms)%3A%20describe%20your%20change...#L254-L264\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/ng_model.ts#L254-L264\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Sets the new value for the view model and emits an <code>ngModelChange</code> event.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">viewToModelUpdate</span>(newValue: any): void</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>newValue</code>\n </td>\n <td class=\"param-type\"><code>any</code></td>\n <td class=\"param-description\">\n <p>The new value emitted by <code>ngModelChange</code>.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>void</code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n</section>\n\n \n\n<section class=\"inherited-members-list\">\n <h3 id=\"inherited-from-ngcontrol-1\">Inherited from <code><a class=\"code-anchor\" href=\"api/forms/NgControl\">NgControl</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#inherited-from-ngcontrol-1\"><i class=\"material-icons\">link</i></a></h3>\n <ul>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/NgControl#viewToModelUpdate\">abstract <span class=\"member-name\">viewToModelUpdate</span>(newValue: any): void</a></code>\n </li>\n \n </ul>\n</section>\n\n\n\n<section class=\"inherited-members-list\">\n <h3 id=\"inherited-from-abstractcontroldirective-1\">Inherited from <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective\">AbstractControlDirective</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/NgModel#inherited-from-abstractcontroldirective-1\"><i class=\"material-icons\">link</i></a></h3>\n <ul>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#reset\"><span class=\"member-name\">reset</span>(value: any = undefined): void</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#hasError\"><span class=\"member-name\">hasError</span>(errorCode: string, path?: string | (string | number)[]): boolean</a></code>\n </li>\n \n <li>\n <code><a class=\"code-anchor\" href=\"api/forms/AbstractControlDirective#getError\"><span class=\"member-name\">getError</span>(errorCode: string, path?: string | (string | number)[]): any</a></code>\n </li>\n \n </ul>\n</section>\n\n\n\n\n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/core/ChangeDetectorRef\n - api/core/HostBinding\n - api/core/OnChanges\n - api/core/OnDestroy\n - api/forms\n - api/forms/AbstractControlDirective\n - api/forms/CheckboxControlValueAccessor\n - api/forms/CheckboxRequiredValidator\n - api/forms/DefaultValueAccessor\n - api/forms/EmailValidator\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/forms/FormsModule\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\n - api/forms/NgControl\n - api/forms/NgControlStatus\n - api/forms/NgForm\n - api/forms/NgModelGroup\n - api/forms/NumberValueAccessor\n - api/forms/PatternValidator\n - api/forms/RadioControlValueAccessor\n - api/forms/RangeValueAccessor\n - api/forms/ReactiveFormsModule\n - api/forms/RequiredValidator\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - guide/ajs-quick-reference\n - guide/architecture-components\n - guide/binding-syntax\n - guide/built-in-directives\n - guide/dependency-injection-in-action\n - guide/deprecations\n - guide/docs-style-guide\n - guide/form-validation\n - guide/forms\n - guide/forms-overview\n - guide/frequent-ngmodules\n - guide/glossary\n - guide/lifecycle-hooks\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/pipes\n - guide/router-tutorial-toh\n - guide/sharing-ngmodules\n - guide/styleguide\n - guide/template-reference-variables\n - guide/testing-components-scenarios\n - guide/two-way-binding\n - guide/upgrade\n - guide/user-input\n - tutorial/toh-pt1\n - tutorial/toh-pt2\n - tutorial/toh-pt3\n - tutorial/toh-pt5\n - tutorial/toh-pt6\n-->\n<!-- links from this doc:\n - /api\n - api/common/JsonPipe\n - api/core/Component\n - api/core/EventEmitter\n - api/core/Input\n - api/core/Output\n - api/forms\n - api/forms/AbstractControlDirective\n - api/forms/AbstractControlDirective#asyncValidator\n - api/forms/AbstractControlDirective#control\n - api/forms/AbstractControlDirective#dirty\n - api/forms/AbstractControlDirective#disabled\n - api/forms/AbstractControlDirective#enabled\n - api/forms/AbstractControlDirective#errors\n - api/forms/AbstractControlDirective#getError\n - api/forms/AbstractControlDirective#hasError\n - api/forms/AbstractControlDirective#invalid\n - api/forms/AbstractControlDirective#path\n - api/forms/AbstractControlDirective#pending\n - api/forms/AbstractControlDirective#pristine\n - api/forms/AbstractControlDirective#reset\n - api/forms/AbstractControlDirective#status\n - api/forms/AbstractControlDirective#statusChanges\n - api/forms/AbstractControlDirective#touched\n - api/forms/AbstractControlDirective#untouched\n - api/forms/AbstractControlDirective#valid\n - api/forms/AbstractControlDirective#validator\n - api/forms/AbstractControlDirective#value\n - api/forms/AbstractControlDirective#valueChanges\n - api/forms/Form\n - api/forms/FormControl\n - api/forms/FormsModule\n - api/forms/NgControl\n - api/forms/NgControl#name\n - api/forms/NgControl#valueAccessor\n - api/forms/NgControl#viewToModelUpdate\n - api/forms/NgForm\n - api/forms/NgModel#description\n - api/forms/NgModel#inherited-from-abstractcontroldirective\n - api/forms/NgModel#inherited-from-abstractcontroldirective-1\n - api/forms/NgModel#inherited-from-ngcontrol\n - api/forms/NgModel#inherited-from-ngcontrol-1\n - api/forms/NgModel#methods\n - api/forms/NgModel#ngmodel\n - api/forms/NgModel#ngmodule\n - api/forms/NgModel#properties\n - api/forms/NgModel#see-also\n - api/forms/NgModel#selectors\n - api/forms/NgModel#setting-the-ngmodel-name-attribute-through-options\n - api/forms/NgModel#template-variable-references\n - api/forms/NgModel#using-a-standalone-ngmodel-within-a-group\n - api/forms/NgModel#using-ngmodel-on-a-standalone-control\n - api/forms/NgModel#using-ngmodel-within-a-form\n - api/forms/NgModel#viewtomodelupdate\n - api/forms/RadioControlValueAccessor\n - api/forms/SelectControlValueAccessor\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/ng_model.ts?message=docs(forms)%3A%20describe%20your%20change...#L254-L264\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/ng_model.ts?message=docs(forms)%3A%20describe%20your%20change...#L47-L332\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/ng_model.ts#L254-L264\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/ng_model.ts#L47-L332\n-->"
|
|
} |