javascript - Hur man dynamiskt lägger till inmatningsfält i Angular 6

Jag behöver lägga till inmatningsfält till en matris av objekt och en karta som växer dynamiskt baserat på användarens val.

Till exempel har InputForm en lista och en karta som behöver fyllas i av användaren.

export class InputForm {
  mapA: {};
  listA: ListA[] = [];
}

export class ListA {
    input1 : String
    input2 : number
}

Jag behöver visa det på användargränssnittet på ett sätt så att input1, input2 och nyckel, värde för kriteriekartan är synliga som inmatningsfält. Användaren fyller i alla 4 inmatningsfält och klickar på lägg till-knappen.

Å andra sidan bör samma inmatningsfält vara redigerbara för användaren för den andra inmatningen. På detta sätt kan han bygga en lista och en karta, och när han klickar på skickaknappen ska arrayen och kartan ha alla värden ifyllda innan.

*ngFor fungerar inte eftersom den initiala listan är tom.

Svar #1

Förutsatt att du använder Angular Reactive Form kan du använda en kombination av *ngFor och FormArray. Du kan börja med en tom FormArray och lägga till dynamiskt med hjälp av .push()-metoden.

Här är ett bra och detaljerat exempel

// order-form.component.ts:

@Component({
  selector: '...',
  templateUrl: './order-form.component.html'
})
export class OrderFormComponent implements OnInit{
  orderForm: FormGroup;
  items: FormArray;

  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.orderForm = this.formBuilder.group({
      customerName: '',
      email: '',
      items: this.formBuilder.array([ this.createItem() ])
    });
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      description: '',
      price: ''
    });
  }

  addItem(): void {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }
}

<!-- order-form.component.html -->

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>

Relaterade artiklar