각도 2 동적 FormGroup 이름 가져 오기

Question

https://angular.io/api/forms/FormGroupName 여기 FormGroupName은 어떻게 얻을 수 있습니까?

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 개체 :

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

방법 currentGFormGroupName 내부에서 입력 값을 업데이트하는?

Answer 1

당신은

구성 요소

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>