directive
Syncs a FormControl
in an existing FormGroup
to a form control element by name.
Property | Description |
---|---|
override | 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. |
control: FormControl | Read-Only |
name: string | number | null | |
@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 | Deprecated as of v6 |
@Output('ngModelChange')update: EventEmitter | Deprecated as of v6 |
path: string[] | Read-Only |
formDirective: any | Read-Only The top-level directive for this group if present, otherwise null. |
NgControl
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
FormControl
within a groupThe 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:
RadioControlValueAccessor
SelectControlValueAccessor
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.
viewToModelUpdate() | |||
---|---|---|---|
|
newValue | any |
void
NgControl
AbstractControlDirective
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/forms/FormControlName