Angular: как l oop через FormArray, который вложен в FormGroup, который уже вложен в другую FormGroup? - PullRequest
Новая
       45

Angular: как l oop через FormArray, который вложен в FormGroup, который уже вложен в другую FormGroup?

0 голосов
/ 08 апреля 2020

Я использую этот блок кода для создания своей формы: 

@Input() fetchedTask: Task;
taskForm: FormGroup;
formThresholds: FormArray;


this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

Позже я устанавливаю значения формы, используя setValue(): 

this.taskForm.controls["taskId"].setValue(this.fetchedTask.taskId);

Я устанавливаю значение моего FormArray, используя: 

this.fetchedTask.configuration.thresholds.forEach((x)=>{
              this.addItem(x.value, x.name);
            })

addItem(value: number, name: string): void {
      this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
      this.formThresholds.push(this.createItem(value, name));
    }

createItem(value: number, name: string): FormGroup{
      return this._formBuilder.group({
        value: value,
        name: name
      });
    }

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

Я пробовал это, но безуспешно: 

        <div *ngFor="let threshold of taskForm.get('configuration.thresholds') let i = index;">
            <div [formGroupName]="i">
                <input formControlName="name" placeholder="Threshold name">
                <input formControlName="value" placeholder="Threshold value">
            </div>
        </div>

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Либо вы можете непосредственно ввести HTML, как показано ниже: 

*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"

, либо вы можете создать свойство get в компоненте и использовать его в html или в файле ts. 

get formThresholds():FormArray{
    return this.taskForm.get('configuration.thresholds') as FormArray;
}
0 голосов
/ 08 апреля 2020

Благодаря Gourav Garg и моей возни я получил ответ.

Проблема заключалась в том, что я пропустил родительский тег div, относящийся к группе formGroup, к которой принадлежит formArray - группе форм конфигурации.

Итак, для этой структуры формы: 

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

get thresholds(): FormArray{
      return this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
    }

, если я хочу показать значения с порога на моей странице, мне нужно 4 тега. Пример: 

<form [formGroup]="taskForm">
    <div formGroupName="configuration">
        <div formArrayName="thresholds"
            *ngFor="let threshold of this.taskRunProfileForm['controls'].configuration['controls'].thresholds['controls']; let i = index;">
            <div [formGroupName]="i">
                {{name.value}}
                {{value.value}}
            </div>
        </div>
    </div>
</form>
...