Как инициировать форматирование из существующего массива? - PullRequest
Новая
       12

Как инициировать форматирование из существующего массива?

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

Я создаю редактируемую таблицу с помощью formarray.У меня есть этот атрибут «результаты», который должен быть показан в таблице.Таким образом, я должен начать formarray с этими «результатами».Так как я могу это сделать? 

results: Array;
tableForm: FormGroup;

ngOnInit(private fb: FormBuilder) {
 this.tableForm = this.fb.group({
   arrayForm: this.fb.array([])
 });
}

Ответы [ 2 ]

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

Массив форм - это набор элементов управления формой (как напоминание, группа форм - это элемент управления формой).

В дальнейшем я буду предполагать, что ваши результаты связаны с моделью, например 

[
  { id: 1, title: 'title 1' },
  { id: 2, title: 'title 2' },
]

(Если нет, не стесняйтесь объяснить мне, каковы результаты)

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

Вы можете сделать это следующим образом: 

ngOnInit(private fb: FormBuilder) {
 this.tableForm = this.fb.group({
   arrayForm: this.fb.array(this.results.map(r => this.fb.group(r)))
 });
}

При этом ваш массив форм будет содержать группу форм, состоящую из всех свойств вашего объекта.

Это то, что вы хотели или нет?

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

Вы можете создать массив на основе ОБЪЕКТА (не интерфейса).

Я действительно написал небольшую демонстрацию несколько дней назад:

наш ОБЪЕКТ (!): 

 valueFromBackend = {
    propOne: 'X',
    propTwo: 'Y',
    propArray: [
      {
        objPropA: 'a',
        objPropB: 'b'
      },
      {
        objPropA: 'c',
        objPropB: 'd'
      },
      {
        objPropA: 'e',
        objPropB: 'f'
      }
    ]
  }

Компонент: 

ngOnInit() {
    const count = this.valueFromBackend.propArray.length

    this.myForm = this.fb.group({
      propOne: '',
      propTwo: '',
      propArray: this.fb.array([...this.createItems(count)])
    });

    // dynamically set value
    this.myForm.setValue(this.valueFromBackend);
  }

  private createItem(): FormGroup {
    return this.fb.group({
      objPropA: '',
      objPropB: '',
    });
  }

  private createItems(count: number): FormGroup[] {
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push(this.createItem());
    }
    return arr;
  }

HTML: 

<form [formGroup]="myForm">
    <div formArrayName="propArray" *ngFor="let item of myForm.get('propArray').controls; let i = index;">
        <div [formGroupName]="i">
            <input formControlName="objPropA" placeholder="Item name">
      <input formControlName="objPropB" placeholder="Item description">
  </div>
  </div>
</form>
...