Включить правильное связывание данных Angular formArray - PullRequest
Новая
       35

Включить правильное связывание данных Angular formArray

0 голосов
/ 20 сентября 2019

Я хочу создать formArray внутри FormGroup.formArray имеет несколько formGroup и FormGroup создано, но я могу связать данные в html, если я записываю что-то во входной тег, индекс которого равен 0, но данные отражаются на последнем FormGroup.

HTML: 

<code><form [formGroup]="form">
  <table>
  <thead>
    <tr>
      <th>City</th>
      <th>Employee id</th>
    </tr>
  </thead>
  <tbody formArrayName="myNewArray">
    <tr *ngFor="let controls of form.get('myNewArray').controls; let i = index">
      <div [formGroupName]="i">
        <td>
         <mat-form-field>
          <input matInput class="size-input" formControlName="first">
        </mat-form-field>
      </td>
      <td>
         <mat-form-field>
          <input matInput class="size-input" formControlName="second">
        </mat-form-field>
      </td>
      </div>
    </tr>
  </tbody>
  <pre>{{form.value | json}}

TS: 

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
    myNewArray: this.fb.array([])
  });

  }
  ngOnInit(): void {
    const formGroup = { };
    let abc = ['first', 'second'];
    abc.forEach(formControl => {
      formGroup[formControl] = new FormControl("", Validators.required);
    });

    for (let value in abc) {
      let formGroupArray = <FormArray>this.form.controls.myNewArray;
      formGroupArray.push(this.setUsersFormArray(formGroup));
    }
  }
  private setUsersFormArray (formGroup) {
    return this.fb.group(formGroup)
  }

}

Также проверьте по ссылке: - https://stackblitz.com/edit/angular-ptbvgd?file=src/app/app.component.html

1 Ответ

1 голос
/ 20 сентября 2019

Я немного изменил ТС.Надеюсь, это поможет: 

    @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
    myNewArray: this.fb.array([])
  });

  }
  ngOnInit(): void {
    const formGroup = { };
    let abc = ['bonus', 'contributionretirement'];
    abc.forEach(formControl => {
      formGroup[formControl] = new FormControl("", Validators.required);
    });
    console.log(formGroup);

    for (let value in abc) {
      let formGroupArray = this.myNewArray;
      formGroupArray.push(this.setUsersFormArray());
    }
    console.log(this.form.controls.myNewArray);
    for (let controls of this.myNewArray.controls) {
      console.log(controls,'tttt');
    }
  }

  get myNewArray(): FormArray{
    return this.form.get('myNewArray') as FormArray;
  }
  private setUsersFormArray ():FormGroup {
    const formGroup = new FormGroup({});
    let abc = ['bonus', 'contributionretirement'];
    abc.forEach(formControl => {
      formGroup.addControl(formControl, new FormControl("", Validators.required));
    });
    return formGroup;
  }

}
...