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

FormControlName

根據名字將現有 FormGroup 中的 FormControl 與一個表單控制元件進行同步。

Syncs a FormControl in an existing FormGroup to a form control element by name.

參見

Exported from

選擇器

屬性

屬性說明
control: FormControl唯讀

追蹤繫結到此指令的 FormControl 實例。

Tracks the FormControl instance bound to the directive.

@Input('formControlName')
name: string | number | null

追蹤繫結到此指令的 FormControl 名稱。該名稱對應於父 FormGroupFormArray 中的鍵。接受字串形式的名稱或數字。字串形式的名稱對於獨立表單很有用,而數字形式則允許在 FormArray 控制元件上進行迭代時將表單控制元件繫結到索引。

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

@Input('disabled')
isDisabled: boolean
只寫

在開發人員模式下觸發警告,該輸入不應與響應式表單一起使用。

Triggers a warning in dev mode that this input should not be used with reactive forms.

@Input('ngModel')
model: any
@Output('ngModelChange')
update: EventEmitter
path: string[]唯讀

返回一個數組,該陣列表示從最上層表單到此控制元件的路徑。每個索引是該級別上控制元件的字串名稱。

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.

formDirective: any唯讀

該組的最上層指令(如果存在),否則為 null。

The top-level directive for this group if present, otherwise null.

繼承自 NgControl

繼承自 AbstractControlDirective

說明

FormControl 註冊進一個組

Register FormControl within a group

下面的例子示範瞭如何把多個表單控制元件註冊進一個表單組,並設定它們的值。

The 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'});
  }
}
    

要檢視把 formControlName 應用於不同型別的表單控制元件的例子,參見:

To see formControlName examples with different form control types, see:

和 ngModel 一起使用

Use with ngModel is deprecated

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.

方法

設定檢視模型的新值併發出 ngModelChange 事件。

Sets the new value for the view model and emits an ngModelChange event.

      
      viewToModelUpdate(newValue: any): void
    
引數
newValue any

檢視模型的新值。

The new value for the view model.

返回值

void

繼承自 NgControl

繼承自 AbstractControlDirective