Патч динамических данных для повторения типа в угловую форму - PullRequest
Новая
       22

Патч динамических данных для повторения типа в угловую форму

0 голосов
/ 11 апреля 2019

Моя цель - соединить внешние данные json с формой, содержащей FieldArrayType.

Скажем, у меня есть следующая конфигурация поля формы: 

fields: FormlyFieldConfig[] = [
    {
      key: 'cars',
      type: 'repeat',
      fieldArray: {
        fieldGroupClassName: 'row',
        templateOptions: {
          btnText: 'Add',
        },
        fieldGroup: [
          {
            className: 'col-sm-4',
            type: 'input',
            key: 'type',
            templateOptions: {
              label: 'Type:'
            },
          },
          {
            type: 'input',
            key: 'name',
            className: 'col-sm-3',
            templateOptions: {
              label: 'Name:'
            },
          },
        ],
      },
    },
  ];

И позже я хочу исправить некоторые данные для этого типа повторения: 

  patchData() {
    let data = {
      "cars":[
        {"type":"Type1","name":"Name1"},
        {"type":"Type2","name":"Name2"}]
      };

    // Failure: Only the first car value is patched, the second car is not patched
    // (unless) 'Add' is clicked first, which is not intended.
    this.form.patchValue(data);
  }

Проблема в том, что при начальной загрузке формы в разделе повторов присутствует только один элемент. Поэтому, если я добавлю данные в форму, которая содержит два или более элементов массива полей, только первый элемент будет применен и сохранен в модели.

Есть ли способ программно добавить элементы в FieldArray перед исправлением данных, чтобы данные были получены моделью?

Примечание. Длина данных может варьироваться.

Пожалуйста, смотрите следующий стек в качестве примера: https://stackblitz.com/edit/angular-vfykhx

1 Ответ

0 голосов
/ 11 апреля 2019 

  constructor(
       private fb: FormBuilder
     )
     
     patchData() {
      this.form=this.fb.group({
        cars:this.fb.array([])
      });
      
        let data = {
          "cars":[
            {"type":"Type1","name":"Name1"},
            {"type":"Type2","name":"Name2"}]
          };
        const fa = <FormArray>this.form.controls['cars'];
        data.cars.forEach((each)=>{
          let tFormGroup:FormGroup=this.fb.group({
            type:[each.type],
            name:[each.name]
          });
          tFormGroup.patchValue(each);
          fa.push(tFormGroup);
        })
      }
    <form [formGroup]="form">
      <div formArrayName="cars">
        <div *ngFor="let car of form['controls'].cars;let i=index;" [formGroupName]="i">
          <input ype="text" formControlName="type">
           <input ype="text" formControlName="name">
        </div>
      </div>
    </form>
...