FormGroupName

directive

Syncs a nested FormGroup to a DOM element.

查看"说明"...

参见

Reactive Forms Guide

NgModule

ReactiveFormsModule
```
      
      ReactiveFormsModule
    
```

选择器

[formGroupName]

属性

属性	说明
`@Input('formGroupName') name: string \| number \| null`	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`

说明

This directive can only be used with a parent FormGroupDirective.

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

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

      
      this.form.get('name');

Access individual controls in the group

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

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

Register a nested `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'});
  }
}

参见link

NgModulelink

选择器link

属性link

继承自 AbstractFormGroupDirectivelink

继承自 ControlContainerlink

继承自 AbstractControlDirectivelink

说明link

Access the group by namelink

Access individual controls in the grouplink

Register a nested FormGroup.link

继承自 AbstractFormGroupDirectivelink

继承自 AbstractControlDirectivelink

参见

NgModule

选择器

属性

继承自 `AbstractFormGroupDirective`

继承自 `ControlContainer`

继承自 `AbstractControlDirective`

说明

Access the group by name

Access individual controls in the group

Register a nested `FormGroup`.

继承自 `AbstractFormGroupDirective`

继承自 `AbstractControlDirective`