时间戳

首页 > 解决方案 > Angular 表单动态添加和删除输入

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

问题描述

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

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

  1. 输入 1
  2. 输入 2
  3. 输入 3

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

这是这里的代码是 youtube 链接，如果有帮助，请 在此处输入链接描述


<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)
  }

}

标签： angular

解决方案

Angular 反应形式反应形式 (angular.io)

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

将 ReactiveForms 添加到您的模块

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

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

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

表单-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)

表单-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 包含 FormGroups 的集合。每个 FormGroup 都包含我们输入元素的控件。在这个例子中，我将添加两个输入，一个数字输入和一个文本输入。

表单-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 中添加和删除 FormGroups。如果我们想重置整个表单，我们只需调用 createForm

模板

表单-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 示例

推荐阅读