Блог

Главная - Вопросы по программированию - Угловой Универсальный компонент оболочки FormArray

Угловой Универсальный компонент оболочки FormArray

#angular #typescript

Вопрос:

Я пытаюсь создать универсальный компонент, который принимает группы форм и поля форм и генерирует динамическую форму без каких-либо ошибок. Это работает, как и ожидалось, для обычных полей. Но теперь я также хочу добавить FormArray в этот компонент. У меня возникли проблемы с методами AddFormArray и RemoveFormArray.

Модель

 export class Model{
name:"";
type:"";
label:"";
array:Model[]= [];
}

Компонент

 @Component({
  selector: 'dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
})
export class DynamicFormComponent implements OnInit {
  @Input() form: FormGroup;
  @Input() fields: Model[] = [];

get formArray() : FormArray {
    return this.form.get(this.fields.filter(i=>i.array.length>0)[0].name) as FormArray
  }
  Add() {
    //this is where I am stuck
    //this.formArray.push(new FormArray());
  }

  Remove(i:number) {
    this.formArray.removeAt(i);
  }
}

Расположение

 <form  [formGroup]="form"> 
  <div  *ngFor="let field of fields">
<input [formControlName]="field.name" *ngIf="field.type='normal'">
<div [formArrayName]="field.name"  *ngIf="field.type=='array'">
    <div *ngFor="let arrayField of field.formArray; let i=index">
        <div [formGroupName]="i">
          <input [formControlName]="arrayField.name">          
        </div>
      <button (click)="RemoveFormArray(i)">Remove</button>
      </div>
      <button type="button" (click)="AddFormArray()">Add</button>
</div>
</div>
</form>
Метки: