动态添加和删除输入的 Angular 表单

Question

所以我的问题是我想在至少有 2 个输入的组件中动态添加和删除答案输入。

但是如果我添加一个新的，例如我有

1. input-1
2. input-2
3. input-3

然后我删除 input-1 或 input-2 然后决定添加一个新的输入。例如输入4 我现在有 输入-1 输入-2 输入-4 在 input-2 中添加 input-4 文本后消失。

这是代码 如果有帮助，这里是 youtube 链接 enter link description here

<form #form="ngForm" (ngSubmit)="submit()" 
style="display: flex; justify-content: center;flex-direction:column;align-items: center; padding: 100px 0;">
    <div *ngFor="let ans of task.questionAnswerModelList; let i = index">
      <input [(ngModel)]="ans.answerText" [required]="true" name="{{'answerText' + i}}" 
      style="height: 50px;margin-bottom: 10px;">
      <span style="background-color: red;" (click)="remove(i)">X</span>
      <span>{{ans.answerText}}</span>
    </div>
    <button type="submit" style="width: 100px; color: green;">Submit</button>
  </form>



  
<div style="display: flex; justify-content: center;">
    <button type="button" (click)="addAnswers()" 
style="background-color: aqua; color: white; border: none;padding: 1rem;">Add Answers</button>
</div>

  

import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

export interface QuestionAnswerModelInterface {
  answerText?: string;
  correct?: boolean;
}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  changeDetection:ChangeDetectionStrategy.OnPush
})

export class AppComponent{
  

  @ViewChild('form', {static: false}) public form!: NgForm;

  
  public task = {
    question: '',
    questionAnswerModelList: [
      {
        answerText: '',
      },
      {
        answerText: '',
      },
    ],
  };


  addAnswers(){
    this.task.questionAnswerModelList.push({
      answerText:''
    })
  }

  remove(i:number){
    if(this.task.questionAnswerModelList.length > 2 ){
      this.task.questionAnswerModelList.splice(i,1)
    }
  }

  submit(){
    console.log(this.form)
  }

}

Answer 1

Angular Reactive Forms Reactive Forms (angular.io)

在 Angular 中，完成此任务的典型方法是使用 ReactiveFormsModule 和 FormArray

---

将 ReactiveForms 添加到您的模块

@NgModule({
  imports: [
      ReactiveFormsModule // import ReactiveForms in the module which hosts your Form
  ]
})
export class AppModule {
  constructor() {
  }
}

在您的组件中创建一个 FormGroup FormGroup (angular.io)

您的每个表单输入都将映射到控制器类中 FormGroup 内的一个控件

form-demo.component.ts

@Component()
export class FormDemoComponent implements OnInit {
  myFormGroup: FormGroup
  
  constructor(private formBuilder: FormBuilder) {
    this.myFormGroup = formBuilder.group({});
  }

  ngOnInit(): void {
  }
}

将 FormArray 添加到您的 FormGroup FormArray (angular.io)

form-demo.component.ts

constructor(private formBuilder: FormBuilder) {
  this.myFormGroup = this.createForm();
}

createForm(): FormGroup {
  return this.formBuilder.group({
    rows: this.formBuilder.array([]) // creates a new FormArray
  });
}

// more easily access the dynamic form elements from template
get dynamicRows() {
  return this.myFormGroup.controls["rows"] as FormArray
}

从 FormArray 添加和删除元素

FormArray 包含一组 FormGroup。每个 FormGroup 都包含我们输入元素的控件。在这个例子中，我将添加两个输入，一个数字输入和一个文本输入。

form-demo.component.ts

  addFormRow() {
    this.dynamicRows.push(this.formBuilder.group({
      text: this.formBuilder.control(''),
      number: this.formBuilder.control(0)
    }))
  }

  removeFormRow(idx: number) {
    this.dynamicRows.removeAt(idx);
  }

现在我们可以向 FormArray 添加和删除 FormGroup。如果我们想重置整个表单，我们只需调用 createForm

模板

form-demo.component.html

<button (click)="addFormRow()">Add Row</button>
<form [formGroup]="myFormGroup">
  <ng-container formArrayName="rows">
    <div *ngFor="let control of dynamicRows.controls; let i=index;" [formGroupName]="i">
      <input type="text" formControlName="text">
      <input type="number" formControlName="number">
      <button (click)="removeFormRow(i)">Remove</button>
    </div>
  </ng-container>
</form>

StackBlitz Example