1、インポートモジュールと
「@角度/フォーム」からインポート{ReactiveFormsModule}。
@NgModule({
宣言:[
AppComponent、
FormArrayComponent、
]、
輸入:[
BrowserModule、
AppRoutingModule、
ReactiveFormsModule
]、
プロバイダ:[]、
ブートストラップ:[AppComponent]
})
図2に示すように、TSの対応形成される。ファイル・コード
「@角度/コア」からインポート{コンポーネント、のOnInit}。
"角度/フォーム@" からインポート{FormArray、FormControl、FormGroup}。
「@角度/フォーム」からインポート{バリ}。
@成分({
セレクタ: "APP-形アレイ"、
templateUrl: "./form-array.component.html"、
styleUrls:[ "./form-array.component.css"]
})
エクスポートクラスFormArrayComponent実装のOnInit {
コンストラクタ(){}
formGroup =新しいFormGroup({
別名:新FormArray([新しいFormControl( ""、Validators.required)])
});
ngOnInit(){}
//取得formArrayはformGroup、オブジェクト名のこのインスタンスのメソッド名からオブジェクトFormArray
アリを(){を取得
FormArrayとしてthis.formGroup.get(「エイリアス」)を返します。
}
// formArray中にコントロールを追加
でAddAlias(){
this.ali.push(新FormControl( ""、Validators.required));
}
onSubmit(){
console.warn(this.formGroup.value)。
}
}
3、HTMLは、例をファイル
<FORM [formGroup] = "formGroup"(ngSubmit)= "をonSubmit()">
<DIV formArrayName = "エイリアス">
<H3>エイリアス</ H3>
<ボタン(クリック)= "でAddAlias()">エイリアスを追加</ボタン>
<DIV * ngFor = "ali.controlsのアドレスを聞かせて、聞かせて私はインデックス=">
<ラベル>
エイリアス:
<input type = "text" [formControlName] = "I" />
</ label>は
</ div>
</ div>
<ボタンタイプ= [無効] = "!formGroup.validを" "提出"> </ button>の送信
</フォーム>