FormGroupDirective
将现有的 FormGroup 绑定到 DOM 元素。
Binds an existing FormGroup to a DOM element.
参见
Exported from
选择器
[formGroup]
属性
| 属性 | 说明 |
|---|---|
submitted: boolean | 只读 报告是否已触发表单提交。 Reports whether the form submission has been triggered. |
directives: FormControlName[] | 跟踪已添加的 Tracks the list of added |
@Input('formGroup') | |
@Output() | 触发表单提交后，发出事件。 Emits an event when the form submission has been triggered. |
formDirective: Form | 只读 返回此指令的实例。 Returns this directive's instance. |
control: FormGroup | 只读 |
path: string[] | 只读 返回表示该表单组的路径的数组。由于此指令始终位于表单的顶层，因此它始终为空数组。 Returns an array representing the path to this group. Because this directive always lives at the top level of a form, it always an empty array. |
继承自 ControlContainer
继承自 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
模板变量参考手册
| 标识符 | 用途 |
|---|---|
ngForm | #myTemplateVar="ngForm" |
说明
该指令接受现有的 FormGroup 实例。然后，它将使用此 FormGroup 实例中的任何子控件 FormControl、FormGroup 和 FormArray 的实例与其子指令 FormControlName、FormGroupName 和 FormArrayName 匹配。
This directive accepts an existing FormGroup instance. It will then use this FormGroup instance to match any child FormControl, FormGroup, and FormArray instances to child FormControlName, FormGroupName, and FormArrayName directives.
注册表单组
Register Form Group
下面的示例使用名字和姓氏控件 FormGroup ，并在单击按钮时侦听 ngSubmit 事件。
The following example registers a FormGroup with first name and last name controls, and listens for the ngSubmit event when the button is clicked.
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'});
}
}
方法
在该组中设置控件指令，重新计算其值和有效性并将该实例添加到内部指令列表的方法。 Method that sets up the control directive in this group, re-calculates its value and validity, and adds the instance to the internal list of directives. | |||
参数
返回值 |
从给定 Retrieves the | |||
参数
返回值 |
从内部指令列表中删除此 Removes the | |||
参数
返回值
|
将新的 Adds a new | |||
参数
返回值
|
用于删除表单组的空白方法。 Performs the necessary cleanup when a | |||
参数
返回值
|
检索给定 Retrieves the | |||
参数
返回值 |
向表单添加一个新的 Performs the necessary setup when a | |||
参数
返回值
|
用于删除表单组的空白方法。 Performs the necessary cleanup when a | |||
参数
返回值
|
检索给定 Retrieves the | |||
参数
返回值 |
为给定 Sets the new value for the provided | ||||||
参数
返回值
|
当表单上触发了 “submit” 事件时要调用的方法。触发带有 “submit” 事件的 Method called with the "submit" event is triggered on the form. Triggers the |
在表单上触发“reset”事件时调用的方法。 Method called when the "reset" event is triggered on the form. |
参数没有参数。 返回值
|
将表单重置为初始值并重置其提交状态。 Resets the form to an initial value and resets its submitted status. |
