表单转发器 - angular

Question

我尝试使用 jquery.repeater(npm install jquery.repeater) 在 angular 中应用表单转发器，但没有成功。是否有其他解决方案或工作方式 (jquery.repeater)

Answer 1

有很多方法可以使用纯 Angular 来实现。这是一个：

在组件ts中有如下

constructor(
      private formBuilder : FormBuilder
) { }
 
formInfoHolder = [];

onAdd(){
    let newForm = {
        username : new FormControl(''),
        password : new FormControl(''),
        gender : new FormControl(''),
        profession : new FormControl('')
    }
    this.formInfoHolder.push(this.formBuilder.group(newForm))
}
delete(toDelete){
    let aux : any[] = [];
    for(let form of this.formInfoHolder){
       if(toDelete !== form){
            aux.push(form);
       }
    }
    this.formInfoHolder = aux;
}

然后，在组件html

<div *ngFor="let form of formInfoHolder">
     <form [formGroup]="form">
         <label for="username"> Username </label>
         <input id="username" type="text" formControlName="username">
         <!-- insert other input elements with the formControlName -->
         <label for="delete"> Delete </label>
         <input id="delete" type="button" (click)="delete(form)">
     </form>
</div>
<button (click)="onAdd()">Add</button>

使用此实现，您必须在 app.module.ts

中导入 ReactiveFormsModule

如果您需要额外的解释，请随时询问。

表单转发器 - angular

Form Repeater - angular

angular