FormControlName
directive
Syncs a FormControl
in an existing FormGroup
to a form control element by name.
See also
- Reactive Forms Guide
FormControl
AbstractControl
Exported from
-
ReactiveFormsModule
Selectors
[formControlName]
Properties
Property | Description |
---|---|
control: FormControl
|
Read-Only
Tracks the |
number | null | Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray . Accepts a name as a string or a number. The name in the form of a string is useful for individual forms, while the numerical form allows for form controls to be bound to indices when iterating over controls in a FormArray .
|
@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. |
Inherited from NgControl
name: string | number | null
valueAccessor: ControlValueAccessor | 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
validator: ValidatorFn | null
asyncValidator: AsyncValidatorFn | 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 ngModelChange event.
| |||
viewToModelUpdate(newValue: any): voidParameters
Returns
|
Inherited from NgControl
abstract viewToModelUpdate(newValue: any): void
Inherited from AbstractControlDirective
reset(value: any = undefined): void
hasError(errorCode: string, path?: string | (string | number)[]): boolean
getError(errorCode: string, path?: string | (string | number)[]): any
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/forms/FormControlName