FormControlName
directive
Syncs a FormControl
in an existing FormGroup
to a form control element by name.
See also
NgModule
Selectors
Properties
Property | Description |
---|---|
control: FormControl |
Read-Only Tracks the |
@Input('formControlName')name: string | number | null | Tracks the name of the |
@Input('disabled')isDisabled: boolean |
Write-Only Triggers a warning in dev mode that this input should not be used with reactive forms. |
@Input('ngModel')model: any | |
@Output('ngModelChange')update: EventEmitter | |
path: string[] |
Read-Only Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level. |
formDirective: any |
Read-Only The top-level directive for this group if present, otherwise null. |
validator: ValidatorFn | null |
Read-Only Synchronous validator function composed of all the synchronous validators registered with this directive. |
asyncValidator: AsyncValidatorFn |
Read-Only Async validator function composed of all the async validators registered with this directive. |
Inherited from NgControl
-
name: string | number | null
-
valueAccessor: ControlValueAccessor | null
-
validator: ValidatorFn | null
-
asyncValidator: AsyncValidatorFn | null
Inherited from AbstractControlDirective
-
abstract control: AbstractControl | null
-
value: any
-
valid: boolean | null
-
invalid: boolean | null
-
pending: boolean | null
-
disabled: boolean | null
-
enabled: boolean | null
-
errors: ValidationErrors | null
-
pristine: boolean | null
-
dirty: boolean | null
-
touched: boolean | null
-
status: string | null
-
untouched: boolean | null
-
statusChanges: Observable<any> | null
-
valueChanges: Observable<any> | null
-
path: string[] | null
Description
Register FormControl
within a group
The following example shows how to register multiple form controls within a form group and set their value.
import {Component} from '@angular/core'; import {FormControl, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'example-app', template: ` <form [formGroup]="form" (ngSubmit)="onSubmit()"> <div *ngIf="first.invalid"> Name is too short. </div> <input formControlName="first" placeholder="First name"> <input formControlName="last" placeholder="Last name"> <button type="submit">Submit</button> </form> <button (click)="setValue()">Set preset value</button> `, }) export class SimpleFormGroup { form = new FormGroup({ first: new FormControl('Nancy', Validators.minLength(2)), last: new FormControl('Drew'), }); get first(): any { return this.form.get('first'); } onSubmit(): void { console.log(this.form.value); // {first: 'Nancy', last: 'Drew'} } setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); } }
To see formControlName
examples with different form control types, see:
- Radio buttons:
RadioControlValueAccessor
- Selects:
SelectControlValueAccessor
Use with ngModel is deprecated
Support for using the ngModel
input property and ngModelChange
event with reactive form directives has been deprecated in Angular v6 and is scheduled for removal in a future version of Angular.
For details, see Deprecated features.
Methods
viewToModelUpdate() | |||
---|---|---|---|
Sets the new value for the view model and emits an | |||
|
newValue | any | The new value for the view model. |
Returns
void
Inherited from NgControl
Inherited from AbstractControlDirective
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/forms/FormControlName