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

FormControlNamelink

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

Syncs a FormControl in an existing FormGroup to a form control\nelement by name.

\n\n \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 \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 \n \n \n \n \n
PropertyDescription
\n \n control: FormControl\n Read-Only\n \n

Tracks the FormControl instance bound to the directive.

\n\n \n
\n \n @Input('formControlName')
name: string | number | null\n 		\n \n

Tracks the name of the FormControl bound to the directive. The name corresponds\nto a key in the parent FormGroup or FormArray.\nAccepts a name as a string or a number.\nThe name in the form of a string is useful for individual forms,\nwhile the numerical form allows for form controls to be bound\nto indices when iterating over controls in a FormArray.

\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 formDirective: any\n Read-Only\n \n

The top-level directive for this group if present, otherwise null.

\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

Descriptionlink

\n \n

Register FormControl within a grouplink

\n

The following example shows how to register multiple form controls within a form group\nand set their value.

\n\nimport {Component} from '@angular/core';\nimport {FormControl, FormGroup, Validators} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <div *ngIf=\"first.invalid\"> Name is too short. </div>\n\n <input formControlName=\"first\" placeholder=\"First name\">\n <input formControlName=\"last\" placeholder=\"Last name\">\n\n <button type=\"submit\">Submit</button>\n </form>\n <button (click)=\"setValue()\">Set preset value</button>\n `,\n})\nexport class SimpleFormGroup {\n form = new FormGroup({\n first: new FormControl('Nancy', Validators.minLength(2)),\n last: new FormControl('Drew'),\n });\n\n get first(): any {\n return this.form.get('first');\n }\n\n onSubmit(): void {\n console.log(this.form.value); // {first: 'Nancy', last: 'Drew'}\n }\n\n setValue() {\n this.form.setValue({first: 'Carson', last: 'Drew'});\n }\n}\n\n\n\n\n

To see formControlName examples with different form control types, see:

\n\n

Use with ngModel is deprecatedlink

\n

Support for using the ngModel input property and ngModelChange event with reactive\nform directives has been deprecated in Angular v6 and is scheduled for removal in\na future version of Angular.

\n

For details, see Deprecated features.

\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" }