{ "id": "api/forms/FormControlDirective", "title": "FormControlDirective", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

FormControlDirectivelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Synchronizes a standalone FormControl instance to a form control element.

\n\n

See more...

\n
\n \n \n \n \n
\n

See alsolink

\n \n
\n\n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n
    \n
  • [formControl]
    • \n \n
\n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input('formControl')
form: FormControl\n 		\n \n

Tracks the FormControl instance bound to the directive.

\n\n \n
\n \n @Input('disabled')
isDisabled: boolean\n 		Write-Only\n \n

Triggers a warning in dev mode that this input should not be used with reactive forms.

\n\n \n
\n \n @Input('ngModel')
model: any\n 		\n \n \n \n
\n \n @Output('ngModelChange')
update: EventEmitter\n 		\n \n \n \n
\n \n path: string[]\n Read-Only\n \n

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.

\n\n \n
\n \n control: FormControl\n Read-Only\n \n

The FormControl bound to this directive.

\n\n \n
\n
\n\n\n
\n

Inherited from NgControllink

\n \n
\n\n\n\n
\n

Inherited from AbstractControlDirectivelink

\n \n
\n\n\n\n\n\n\n \n
\n

Template variable referenceslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IdentifierUsage
ngForm#myTemplateVar=\"ngForm\"
\n
\n\n\n\n \n
\n

Descriptionlink

\n

Note that support for using the ngModel input property and ngModelChange event with reactive\nform directives was deprecated in Angular v6 and is scheduled for removal in\na future version of Angular.\nFor details, see Deprecated features.

\n\n

The following example shows how to register a standalone control and set its value.

\n\nimport {Component} from '@angular/core';\nimport {FormControl, Validators} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <input [formControl]=\"control\">\n\n <p>Value: {{ control.value }}</p>\n <p>Validation status: {{ control.status }}</p>\n\n <button (click)=\"setValue()\">Set value</button>\n `,\n})\nexport class SimpleFormControl {\n control: FormControl = new FormControl('value', Validators.minLength(2));\n\n setValue() {\n this.control.setValue('new value');\n }\n}\n\n\n\n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n viewToModelUpdate()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Sets the new value for the view model and emits an ngModelChange event.

\n\n
\n
\n \n\n viewToModelUpdate(newValue: any): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n newValue\n any\n

The new value for the view model.

\n\n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n\n
\n

Inherited from NgControllink

\n \n
\n\n\n\n
\n

Inherited from AbstractControlDirectivelink

\n \n
\n\n\n\n\n \n \n\n
\n
\n\n\n" }