2017-12-08 1 views
1

https://angular.io/api/forms/FormGroupNameここでFormGroupNameを取得します。角2動的フォームグループ名を取得

FormGroupNameが動的である場合の値の取得/更新/更新方法

<div class="row" *ngFor="let itemrow of searchForm.controls.addresses.controls; let ind=index" [formGroupName]="ind"> 
    <input class="form-control" formControlName="name"> 
    <input class="form-control" formControlName="time"> 
</div> 

searchForm.valueオブジェクト:currentGFormGroupName内の入力値を更新する方法

"addresses": [ 
    { 
     "address": "", 
     "name": 0, 
     "time": 0, 
}, 
    { 
     "address": "", 
     "name": 0, 
     "time": 0, 
    } 
    ] 

+0

あなたのJSONを入力してください。 – Swanand

答えて

0

あなたは

コンポーネント

export class AppComponent { 
    addresses = [ 
    { 
     address: 'aa', 
     name: 'aa', 
     time: 'aa' 
    }, 
    { 
     address: 'bb', 
     name: 'bb', 
     time: 'bb' 
    } 
    ]; 

    formGroup: FormGroup; 
    constructor(private fb: FormBuilder) { } 

    ngOnInit() { 
    this.formGroup = new FormGroup({}); 
    let addressGroup = new FormGroup({}); 

    this.addresses.map((group, index) => { 
     const name = 'group-' + index.toString(); 
     const formGroup = this.fb.group({ 
     address: [group.address], 
     name: [group.name], 
     time: [group.time] 
     }); 
     addressGroup.addControl(name, formGroup); 
    }) 

    this.formGroup.addControl('addresses', addressGroup); 
    } 

} 

テンプレートコードで新しいフォームグループを作成することができ

<form [formGroup]="formGroup"> 
    <div formGroupName="addresses"> 
    <div *ngFor="let address of addresses; let i = index"> 
     <div formGroupName="{{'group-'+i}}"> 
     <input type="text" formControlName="address"/> 
     <input type="text" formControlName="name"/> 
     <input type="text" formControlName="time"/> 
     </div> 
    </div> 
    </div> 
</form> 
関連する問題