时间戳

首页 > 解决方案 > Angular 9，如何使用动态输入字段从列表或数组中获取信息？

html - Angular 9，如何使用动态输入字段从列表或数组中获取信息？

问题描述

我需要将所有字符串包含在作为 Atm 对象属性的 Assignes 数组中，并将它们放入所有动态输入中，每个字符串都有一个更新或删除的机会。我该如何使用 FormArray？

atm: Atm; //has an array of string as property 

get Assignes() {
    return this.virtualForm.get('Assignes') as FormArray;
  }

  addAssigne() {
    this.Assignes.push(this.formBuilder.group({ point: '' }));
  }

  deleteAssigne(index) {
    this.Assignes.removeAt(index);
  }

  buildForm() {
    this.form = new FormGroup({
      model: new FormControl(this.atm.Model   , Validators.required),
      vendor: new FormControl(this.atm.Vendor   , Validators.required),
      Assignes : this.formBuilder.array([this.formBuilder.group({point : ''})]),
      
  }
<div formArrayName="Assignes">
        <div *ngFor="let item of Assignes.controls; let pointIndex=index" [formGroupName]="pointIndex">
        <mat-form-field appearance="outline">
          <mat-label>Assigne</mat-label>
          <input matInput formControlName="point" [readonly]=!isAdmin placeholder="Assigne"/>
        </mat-form-field>
        &nbsp;
        <button color="primary" *ngIf="isAdmin" mat-raised-button (click)="deleteAssigne(pointIndex)">Delete assigne</button>
        </div>
        <button color="primary" *ngIf="isAdmin" mat-raised-button (click)="addAssigne()">Add assigne</button>
      </div>

标签： htmlangulartypescript

解决方案

即使不使用 formArray，您也可以简单地做到这一点。您只需要在数组上运行 for 循环并呈现动态输入字段。

代码应如下所示：

<div *ngFor="let item of atm; let pointIndex=index" >
    <mat-form-field appearance="outline">
      <mat-label>Assigne</mat-label>
      <input matInput name="assigne{{i}}" [(ngModel)]="item" placeholder="Assigne"/>
    </mat-form-field>
    &nbsp;
    <button color="primary" *ngIf="isAdmin" mat-raised-button (click)="deleteAssigne(pointIndex)">Delete assigne</button>
    </div>
    <button color="primary" *ngIf="isAdmin" mat-raised-button (click)="addAssigne()">Add assigne</button>

.ts 文件应通过以下方式更新：

atm: Atm; //has an array of string as property 

  addAssigne() {
    this.atm.push('');
  }

  deleteAssigne(index) {
    this.atm.splice(index,1);
  }

推荐阅读