填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/forms

FormGroupName

将嵌套的 FormGroup 同步到 DOM 元素上。

Syncs a nested FormGroup to a DOM element.

查看"说明"...

参见

Exported from

选择器

属性

属性说明
@Input('formGroupName')
name: string | number | null

跟踪绑定到此指令的 FormGroup 名称。该名称对应于父 FormGroup 或 FormArray 中的键名。接受字符串或数字形式的名称。字符串形式的名称对于单个表单很有用，而数字形式则允许在 FormArray 组上进行迭代时将表单组绑定到索引。

Tracks the name of the FormGroup 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 groups to be bound to indices when iterating over groups in a FormArray.

继承自 AbstractFormGroupDirective

继承自 ControlContainer

继承自 AbstractControlDirective

说明

本指令只能与父 FormGroupDirective 一起使用。

This directive can only be used with a parent FormGroupDirective.

它接受嵌套的字符串名称 FormGroup 链接，并寻找使用这个名字在你传给 FormGroupDirective 的父 FormGroup 实例中注册的 FormGroup。

It accepts the string name of the nested FormGroup to link, and looks for a FormGroup registered with that name in the parent FormGroup instance you passed into FormGroupDirective.

使用嵌套表单组可以与其余表单分开验证表单的子组，也可以将某些控件的值分组到自己的嵌套对象中。

Use nested form groups to validate a sub-group of a form separately from the rest or to group the values of certain controls into their own nested object.

按名称访问组

Access the group by name

下面的示例使用 get 方法访问关联的 FormGroup

The following example uses the get method to access the associated FormGroup

      
      this.form.get('name');

访问组中的各个控件

Access individual controls in the group

下面的示例使用 get 方法使用点语法访问组中的各个控件。

The following example uses the get method to access individual controls within the group using dot syntax.

      
      this.form.get('name.first');

注册一个嵌套的 FormGroup 。

Register a nested FormGroup.

下面的示例在现有 FormGroup 注册一个嵌套名称的 FormGroup ，并提供检索嵌套 FormGroup 和各个控件的方法。

The following example registers a nested name FormGroup within an existing FormGroup, and provides methods to retrieve the nested FormGroup and individual controls.

      
      import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <p *ngIf="name.invalid">Name is invalid.</p>

      <div formGroupName="name">
        <input formControlName="first" placeholder="First name">
        <input formControlName="last" placeholder="Last name">
      </div>
      <input formControlName="email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>

    <button (click)="setPreset()">Set preset</button>
`,
})
export class NestedFormGroupComp {
  form = new FormGroup({
    name: new FormGroup({
      first: new FormControl('Nancy', Validators.minLength(2)),
      last: new FormControl('Drew', Validators.required)
    }),
    email: new FormControl()
  });

  get first(): any {
    return this.form.get('name.first');
  }

  get name(): any {
    return this.form.get('name');
  }

  onSubmit() {
    console.log(this.first.value);  // 'Nancy'
    console.log(this.name.value);   // {first: 'Nancy', last: 'Drew'}
    console.log(this.form.value);   // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
    console.log(this.form.status);  // VALID
  }

  setPreset() {
    this.name.setValue({first: 'Bess', last: 'Marvin'});
  }
}

继承自 AbstractControlDirective