填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

FormGroupName

將巢狀的 FormGroup 同步到 DOM 元素上。

Syncs a nested FormGroup to a DOM element.

檢視"說明"...

參見

Exported from

選擇器

屬性

屬性說明
@Input('formGroupName')
name: string | number | null

追蹤繫結到此指令的 FormGroup 名稱。該名稱對應於父 FormGroupFormArray 中的鍵名。接受字串或數字形式的名稱。字串形式的名稱對於單個表單很有用,而數字形式則允許在 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